body.koop-poster-lightbox-open { overflow:hidden; } .koop-showcase { --koop-section-gap: clamp(88px, 7.5vw, 124px); position: relative; display: flex; flex-direction: column; gap: var(--koop-section-gap); isolation: isolate; overflow: hidden; background: radial-gradient(circle at 10% 8%, rgb(var(--mek-brand-primary-rgb) / .10), transparent 27%), radial-gradient(circle at 88% 88%, rgb(var(--mek-brand-primary-rgb) / .045), transparent 24%), var(--mek-brand-navy-deep); } .koop-showcase::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .26; background-image: linear-gradient(rgb(255 255 255 / .018) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .014) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent); } .koop-showcase > section { position: relative; z-index: 1; } .koop-showcase > section:first-of-type { padding-top: 62px; } .koop-showcase > section:last-of-type { padding-bottom: 76px; } .koop-calendar-section > .container { container-type:inline-size; container-name:koop-calendar; } .koop-calendar-card + .koop-calendar-card { margin-top:18px; } .koop-calendar-card { position: relative; width: 100%; min-height: 112px; margin-inline: auto; display: grid; grid-template-columns: 196px minmax(0, 1fr); overflow: hidden; border: 1px solid rgb(96 165 250 / .13); border-radius: 21px; color: var(--mek-color-on-dark); background: linear-gradient(120deg, rgb(255 255 255 / .024), rgb(255 255 255 / .006)), var(--mek-brand-navy); box-shadow: 0 18px 48px rgb(0 0 0 / .21), inset 0 1px 0 rgb(255 255 255 / .018); transition: transform var(--mek-duration-slow) var(--mek-ease-standard), border-color var(--mek-transition), box-shadow var(--mek-transition); } .koop-calendar-card:hover { transform: translateY(-2px); border-color: rgb(96 165 250 / .22); box-shadow: 0 23px 56px rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .022); } .koop-calendar-card::before { content:""; position:absolute; right:-58px; top:-102px; width:238px; height:238px; border:1px solid rgb(96 165 250 / .08); border-radius:48% 52% 58% 42% / 45% 55% 45% 55%; transform:rotate(19deg); pointer-events:none; } .koop-calendar-card::after { content:""; position:absolute; left:196px; top:16px; bottom:16px; width:1px; background:linear-gradient(180deg,transparent,rgb(255 255 255 / .095),transparent); } .koop-calendar-card__date { position:relative; z-index:2; display:flex; align-items:center; padding:16px 16px 16px 24px; background:linear-gradient(145deg,rgb(var(--mek-brand-primary-rgb) / .085),transparent 72%); } .koop-calendar-card__date-display { display:flex; align-items:center; gap:9px; } .koop-calendar-card__flip { position:relative; display:grid; grid-template-columns:1fr 1fr; width:78px; height:68px; flex:none; overflow:hidden; border-radius:8px; perspective:1000px; background:var(--mek-brand-primary); box-shadow:0 2px 5px rgb(0 0 0 / .13),0 8px 18px rgb(0 0 0 / .18),0 0 0 1px rgb(96 165 250 / .08); transition:transform var(--mek-duration-slow) var(--mek-ease-standard); } .koop-calendar-card__flip::before { content:""; position:absolute; z-index:5; left:0; right:0; top:50%; height:1px; background:#145fa2; box-shadow:0 1px 0 rgb(255 255 255 / .055); } .koop-calendar-card:hover .koop-calendar-card__flip { transform:translateY(-1px); } .koop-calendar-card__digit-column { position:relative; min-width:0; height:68px; overflow:hidden; } .koop-calendar-card__digit { position:absolute; left:0; width:100%; height:50%; overflow:hidden; display:flex; justify-content:center; color:#f7fbff; font-family:Arial,Helvetica,sans-serif; font-size:56px; font-weight:500; line-height:1; text-align:center; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgb(0 0 0 / .16); } .koop-calendar-card__digit--top { top:0; align-items:flex-end; background:linear-gradient(180deg,#2182d4,var(--mek-brand-primary)); } .koop-calendar-card__digit--bottom { bottom:0; align-items:flex-start; background:linear-gradient(180deg,#176cb8,#145fa2); box-shadow:inset 0 7px 16px rgb(2 18 31 / .13); } .koop-calendar-card__digit--top span { transform:translateY(50%); } .koop-calendar-card__digit--bottom span { transform:translateY(-50%); } .koop-calendar-card__digit-column:first-child .koop-calendar-card__digit--top span { transform:translate(5px,50%); } .koop-calendar-card__digit-column:first-child .koop-calendar-card__digit--bottom span { transform:translate(5px,-50%); } .koop-calendar-card__digit-column:last-child .koop-calendar-card__digit--top span { transform:translate(-5px,50%); } .koop-calendar-card__digit-column:last-child .koop-calendar-card__digit--bottom span { transform:translate(-5px,-50%); } .koop-calendar-card__date-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; width:78px; transform:translateY(1px); } .koop-calendar-card__month { color:#f8fbff; font-size:19px; line-height:1; font-weight:var(--mek-font-weight-bold); letter-spacing:-.028em; text-transform:uppercase; white-space:nowrap; } .koop-calendar-card__year { margin-top:5px; color:#93c5fd; font-size:22px; line-height:.98; font-weight:var(--mek-font-weight-medium); letter-spacing:-.025em; } .koop-calendar-card__content { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 132px; align-items:center; gap:22px; padding:6px 24px 6px 24px; } .koop-calendar-card__main { min-width:0; } .koop-calendar-card__meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:7px 15px; margin-bottom:4px; } .koop-calendar-card__meta { display:inline-flex; align-items:center; gap:6px; color:#9eadc0; font-size:12.5px; font-weight:var(--mek-font-weight-semibold); } .koop-calendar-card__meta svg { width:15px; height:15px; fill:none; stroke:#60a5fa; stroke-width:1.8; } .koop-calendar-card__meta-separator { width:3px; height:3px; border-radius:50%; background:rgb(255 255 255 / .18); } .koop-calendar-card__title { max-width:790px; margin:0; color:#f8fafc; font-family:var(--mek-font-site-sans); font-size:clamp(16px,1.45vw,20px); line-height:1.17; letter-spacing:-.025em; font-weight:var(--mek-font-weight-bold); } .koop-calendar-card__description { max-width:820px; margin:2px 0 0; color:#a7b3c5; font-size:11.7px; line-height:1.52; } .koop-calendar-card__action { display:flex; align-items:center; justify-content:center; } .koop-calendar-card__button { min-width:120px; height:36px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgb(96 165 250 / .34); border-radius:11px; color:#fff; background:linear-gradient(180deg,#2182d4,var(--mek-brand-primary)); box-shadow:0 8px 19px rgb(var(--mek-brand-primary-rgb) / .18); text-decoration:none; font-size:11px; font-weight:var(--mek-font-weight-extrabold); transition:transform var(--mek-transition),background var(--mek-transition),box-shadow var(--mek-transition); } .koop-calendar-card__button svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; transition:transform var(--mek-transition); } .koop-calendar-card__button:hover { color:#fff; transform:translateY(-1px); background:linear-gradient(180deg,var(--mek-brand-primary),#145fa2); box-shadow:0 11px 23px rgb(var(--mek-brand-primary-rgb) / .22); } .koop-calendar-card__button:hover svg { transform:translateX(2px); } .koop-team-grid { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:37px; } .koop-team-card { position:relative; min-width:0; overflow:hidden; display:flex; flex-direction:column; padding:12px 24px 0; text-align:center; border:1px solid rgb(var(--mek-brand-primary-rgb) / .20); border-radius:8px; background:#151e4f; box-shadow:0 16px 40px rgb(2 8 23 / .22); } .koop-team-card__content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:stretch; transform:translateY(-5px); } .koop-team-card__name { min-height:2.28em; margin:0; display:flex; align-items:flex-end; justify-content:center; color:#f8fafc; font-family:var(--mek-font-site-sans); font-size:clamp(18px,1.22vw,20px); font-weight:var(--mek-font-weight-bold); line-height:1.14; letter-spacing:-.012em; text-align:center; text-transform:uppercase; text-wrap:balance; overflow-wrap:anywhere; } .koop-team-card__name a { color:inherit; text-decoration:none; } .koop-team-card__name a:hover { color:#7ec1ff; } .koop-team-card__role { min-height:1.45em; margin:2px 0 0; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:15px; font-weight:var(--mek-font-weight-medium); line-height:1.32; } .koop-team-card__image-box { position:relative; width:min(96%,292px); margin-top:auto; margin-inline:auto; padding-top:8px; z-index:1; } .koop-team-card__shape { position:absolute; left:50%; bottom:-106px; width:288px; height:288px; transform:translateX(-50%); display:grid; place-items:center; border-radius:50%; background:rgb(var(--mek-brand-primary-rgb) / .14); transition:background-color .7s ease; } .koop-team-card__shape span { width:230px; height:230px; border-radius:50%; background:rgb(var(--mek-brand-primary-rgb) / .24); transform:scale(1); transition:transform .7s ease,background-color .7s ease; } .koop-team-card:hover .koop-team-card__shape { background:rgb(var(--mek-brand-primary-rgb) / .22); } .koop-team-card:hover .koop-team-card__shape span { transform:scale(1.1); background:rgb(var(--mek-brand-primary-rgb) / .48); } .koop-team-card__image-box img { position:relative; z-index:2; display:block; width:100%; height:auto; } .koop-poster-gallery { width:100%; } .koop-poster-stage { --koop-poster-size:clamp(320px,31vw,420px); --koop-poster-stage-height:clamp(360px,32vw,440px); position:relative; width:100%; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:52px; min-height:calc(var(--koop-poster-stage-height) + 80px); perspective:1300px; } .koop-poster-stage__wrap { position:relative; width:100%; min-width:0; height:var(--koop-poster-stage-height); display:flex; align-items:center; justify-content:center; overflow:visible; perspective:1300px; } .koop-poster-stage__cards { position:relative; width:100%; height:100%; min-width:0; transform-style:preserve-3d; } .koop-poster-card { position:absolute; left:50%; top:50%; width:var(--koop-poster-size); aspect-ratio:1; padding:0; border:0; background:transparent; cursor:zoom-in; transform-origin:center; will-change:transform,filter,opacity; transition:transform .6s var(--mek-ease-emphasized),filter .6s ease,opacity .6s ease; } .koop-poster-card img { display:block; width:100%; height:100%; object-fit:cover; box-shadow:0 25px 75px rgb(0 0 0 / .6); } .koop-poster-card[data-position="2"] { z-index:5; transform:translate(-50%,-50%) translateZ(160px); } .koop-poster-card[data-position="1"] { z-index:3; transform:translate(-128%,-50%) rotateY(42deg) scale(.78); filter:brightness(.5); } .koop-poster-card[data-position="3"] { z-index:3; transform:translate(28%,-50%) rotateY(-42deg) scale(.78); filter:brightness(.5); } .koop-poster-card[data-position="0"] { z-index:1; transform:translate(-182%,-50%) rotateY(58deg) scale(.55); filter:brightness(.25); } .koop-poster-card[data-position="4"] { z-index:1; transform:translate(82%,-50%) rotateY(-58deg) scale(.55); filter:brightness(.25); } .koop-poster-card[data-position="hidden"] { visibility:hidden; opacity:0; pointer-events:none; } .koop-poster-stage__nav { position:absolute; top:50%; z-index:20; width:58px; height:58px; padding:0; border:1px solid rgb(255 255 255 / .14); border-radius:0; display:grid; place-items:center; transform:translateY(-50%); background:rgb(18 27 77 / .78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#f8fafc; font-size:0; line-height:0; cursor:pointer; transition:background var(--mek-transition),border-color var(--mek-transition),transform var(--mek-transition); } .koop-poster-stage__nav-icon { width:24px; height:24px; display:block; overflow:visible; fill:none; stroke:currentColor; stroke-width:2.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .koop-poster-stage__nav:hover { background:var(--mek-brand-primary); border-color:rgb(255 255 255 / .24); color:#fff; } .koop-poster-stage__nav:focus-visible { outline:3px solid rgb(96 165 250 / .62); outline-offset:3px; } .koop-poster-stage__nav--prev { left:clamp(15px,5vw,70px); } .koop-poster-stage__nav--next { right:clamp(15px,5vw,70px); } .koop-poster-stage__dots { min-height:28px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; padding-inline:8px; } .koop-poster-stage__dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#52627a; cursor:pointer; transition:width var(--mek-transition),background var(--mek-transition); } .koop-poster-stage__dot.is-active { width:28px; border-radius:5px; background:var(--mek-brand-primary); } .koop-poster-lightbox { position:fixed; inset:0; z-index:var(--mek-z-modal); display:flex; align-items:center; justify-content:center; padding:28px; background:rgb(4 9 18 / .94); backdrop-filter:blur(16px); } .koop-poster-lightbox[hidden] { display:none; } .koop-poster-lightbox img { max-width:min(760px,88vw); max-height:88vh; width:auto; height:auto; box-shadow:0 35px 110px #000; } .koop-poster-lightbox__close { position:absolute; right:26px; top:22px; width:48px; height:48px; padding:0; border:1px solid rgb(255 255 255 / .14); background:var(--mek-brand-navy); color:#f8fafc; font:28px/1 Arial,sans-serif; cursor:pointer; } @media (max-width:1199.98px) { .koop-team-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:991.98px) { .koop-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @container koop-calendar (max-width:900px) { .koop-calendar-card { grid-template-columns:166px minmax(0,1fr); min-height:104px; } .koop-calendar-card::after { left:166px; top:14px; bottom:14px; } .koop-calendar-card__date { padding:12px 8px 12px 12px; } .koop-calendar-card__date-display { gap:8px; } .koop-calendar-card__flip { width:68px; height:60px; } .koop-calendar-card__digit-column { height:60px; } .koop-calendar-card__digit { font-size:46px; } .koop-calendar-card__date-copy { width:70px; } .koop-calendar-card__month { font-size:16px; } .koop-calendar-card__year { margin-top:4px; font-size:19px; } .koop-calendar-card__content { grid-template-columns:minmax(0,1fr) 116px; gap:14px; padding:7px 9px 7px 18px; } .koop-calendar-card__meta-row { gap:6px 12px; margin-bottom:5px; } .koop-calendar-card__meta { gap:5px; font-size:10.75px; } .koop-calendar-card__meta svg { width:13px; height:13px; } .koop-calendar-card__title { max-width:none; font-size:15px; line-height:1.19; } .koop-calendar-card__description { max-width:none; margin-top:2px; font-size:10.5px; line-height:1.4; } .koop-calendar-card__button { min-width:106px; height:32px; padding-inline:10px; gap:6px; font-size:10px; } } @container koop-calendar (max-width:640px) { .koop-calendar-card { grid-template-columns:1fr; min-height:0; } .koop-calendar-card::after { display:none; } .koop-calendar-card__date { min-height:80px; padding:10px 118px 10px 14px; } .koop-calendar-card__content { position:static; grid-template-columns:1fr; gap:14px; padding:12px 14px 14px; border-top:1px solid rgb(96 165 250 / .13); } .koop-calendar-card__description { margin-top:6px; } .koop-calendar-card__meta-row { position:absolute; z-index:3; top:40px; right:14px; width:auto; margin:0; display:flex; flex-direction:column; align-items:flex-end; gap:7px; transform:translateY(-50%); } .koop-calendar-card__meta--format { order:1; } .koop-calendar-card__meta--time { order:2; } .koop-calendar-card__meta { justify-content:flex-end; gap:5px; font-size:11px; line-height:1.15; white-space:nowrap; } .koop-calendar-card__meta svg { width:13px; height:13px; } .koop-calendar-card__meta-separator { display:none; } .koop-calendar-card__action { justify-content:flex-start; } } @supports not (container-type:inline-size) { @media (min-width:768px) and (max-width:991.98px) { .koop-calendar-card { grid-template-columns:166px minmax(0,1fr); min-height:104px; } .koop-calendar-card::after { left:166px; top:14px; bottom:14px; } .koop-calendar-card__date { padding:12px 8px 12px 12px; } .koop-calendar-card__date-display { gap:8px; } .koop-calendar-card__flip { width:68px; height:60px; } .koop-calendar-card__digit-column { height:60px; } .koop-calendar-card__digit { font-size:46px; } .koop-calendar-card__date-copy { width:70px; } .koop-calendar-card__month { font-size:16px; } .koop-calendar-card__year { margin-top:4px; font-size:19px; } .koop-calendar-card__content { grid-template-columns:minmax(0,1fr) 116px; gap:14px; padding:7px 9px 7px 18px; } .koop-calendar-card__meta-row { gap:6px 12px; margin-bottom:5px; } .koop-calendar-card__meta { gap:5px; font-size:10.75px; } .koop-calendar-card__meta svg { width:13px; height:13px; } .koop-calendar-card__title { max-width:none; font-size:15px; line-height:1.19; } .koop-calendar-card__description { max-width:none; margin-top:2px; font-size:10.5px; line-height:1.4; } .koop-calendar-card__button { min-width:106px; height:32px; padding-inline:10px; gap:6px; font-size:10px; } } @media (max-width:767.98px) { .koop-calendar-card { grid-template-columns:1fr; min-height:0; } .koop-calendar-card::after { display:none; } .koop-calendar-card__date { min-height:80px; padding:10px 118px 10px 14px; } .koop-calendar-card__content { position:static; grid-template-columns:1fr; gap:14px; padding:12px 14px 14px; border-top:1px solid rgb(96 165 250 / .13); } .koop-calendar-card__description { margin-top:6px; } .koop-calendar-card__meta-row { position:absolute; z-index:3; top:40px; right:14px; width:auto; margin:0; display:flex; flex-direction:column; align-items:flex-end; gap:7px; transform:translateY(-50%); } .koop-calendar-card__meta--format { order:1; } .koop-calendar-card__meta--time { order:2; } .koop-calendar-card__meta { justify-content:flex-end; gap:5px; font-size:11px; line-height:1.15; white-space:nowrap; } .koop-calendar-card__meta svg { width:13px; height:13px; } .koop-calendar-card__meta-separator { display:none; } .koop-calendar-card__action { justify-content:flex-start; } } } @media (max-width:1199.98px) and (min-width:701px) { .koop-poster-stage { --koop-poster-size:clamp(340px,44vw,400px); --koop-poster-stage-height:clamp(370px,48vw,430px); } .koop-poster-card[data-position="1"] { transform:translate(-118%,-50%) rotateY(44deg) scale(.72); } .koop-poster-card[data-position="3"] { transform:translate(18%,-50%) rotateY(-44deg) scale(.72); } .koop-poster-card[data-position="0"] { transform:translate(-168%,-50%) rotateY(58deg) scale(.50); } .koop-poster-card[data-position="4"] { transform:translate(68%,-50%) rotateY(-58deg) scale(.50); } .koop-poster-stage__nav { width:50px; height:50px; } .koop-poster-stage__nav-icon { width:21px; height:21px; stroke-width:2.65; } .koop-poster-stage__nav--prev { left:clamp(9px,2.4vw,26px); } .koop-poster-stage__nav--next { right:clamp(9px,2.4vw,26px); } } @media (max-width:700px) { .koop-showcase > section:first-of-type { padding-top: 46px; } .koop-showcase > section:last-of-type { padding-bottom: 60px; } .koop-poster-section > .container { max-width:100%; padding-left:0; padding-right:0; } .koop-poster-stage { --koop-poster-size:clamp(236px,72vw,350px); --koop-poster-stage-height:clamp(260px,76vw,380px); gap:36px; min-height:calc(var(--koop-poster-stage-height) + 64px); overflow:hidden; } .koop-poster-stage__wrap { width:100%; overflow:visible; } .koop-poster-card[data-position="2"] { transform:translate(-50%,-50%) translateZ(100px); } .koop-poster-card[data-position="1"] { transform:translate(-105%,-50%) rotateY(38deg) scale(.62); filter:brightness(.46); } .koop-poster-card[data-position="3"] { transform:translate(5%,-50%) rotateY(-38deg) scale(.62); filter:brightness(.46); } .koop-poster-card[data-position="0"],.koop-poster-card[data-position="4"] { opacity:0; pointer-events:none; } .koop-poster-stage__nav { width:42px; height:42px; border-radius:10px; } .koop-poster-stage__nav-icon { width:19px; height:19px; stroke-width:2.6; } .koop-poster-stage__nav--prev { left:max(8px,env(safe-area-inset-left)); } .koop-poster-stage__nav--next { right:max(8px,env(safe-area-inset-right)); } .koop-poster-stage__dots { min-height:24px; gap:7px; } .koop-poster-stage__dot { width:6px; height:6px; } .koop-poster-stage__dot.is-active { width:24px; } .koop-poster-lightbox { padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); } .koop-poster-lightbox img { max-width:calc(100vw - 24px); max-height:calc(100dvh - 32px); } .koop-poster-lightbox__close { right:max(12px,env(safe-area-inset-right)); top:max(12px,env(safe-area-inset-top)); width:42px; height:42px; display:grid; place-items:center; line-height:1; } } @media (max-width:390px) { .koop-poster-stage { --koop-poster-size:clamp(220px,72vw,280px); --koop-poster-stage-height:clamp(244px,78vw,305px); } .koop-poster-stage__nav { width:38px; height:38px; border-radius:9px; } .koop-poster-stage__nav-icon { width:18px; height:18px; stroke-width:2.55; } .koop-poster-stage__nav--prev { left:max(6px,env(safe-area-inset-left)); } .koop-poster-stage__nav--next { right:max(6px,env(safe-area-inset-right)); } } @media (max-width:767.98px) { .koop-team-grid { grid-template-columns:1fr; max-width:420px; margin-inline:auto; } } @media (max-width:460px) { .koop-calendar-card { width:100%; border-radius:18px; } .koop-calendar-card__flip { width:70px; height:60px; } .koop-calendar-card__digit-column { height:60px; } .koop-calendar-card__digit { font-size:48px; } .koop-calendar-card__month { font-size:18px; } .koop-calendar-card__year { font-size:20px; } .koop-calendar-card__title { font-size:18px; } .koop-calendar-card__description { font-size:11.3px; } .koop-calendar-card__button { width:100%; } } @media (max-width:350px) { .koop-calendar-card__date { padding-right:106px; } .koop-calendar-card__date-display { gap:6px; } .koop-calendar-card__flip { width:64px; height:56px; } .koop-calendar-card__digit-column { height:56px; } .koop-calendar-card__digit { font-size:44px; } .koop-calendar-card__date-copy { width:62px; } .koop-calendar-card__month { font-size:16px; } .koop-calendar-card__year { font-size:18px; } .koop-calendar-card__meta-row { right:12px; } .koop-calendar-card__meta { font-size:10.25px; } } @media (prefers-reduced-motion:reduce) { .koop-calendar-card,.koop-calendar-card__button,.koop-calendar-card__button svg,.koop-team-card__shape,.koop-team-card__shape span,.koop-poster-card,.koop-poster-stage__dot { transition:none; } } .koop-team-grid { align-items: stretch; gap: clamp(20px, 2vw, 37px); } .koop-team-card { min-height: 100%; justify-content: space-between; padding: 16px clamp(18px, 1.6vw, 24px) 0; border-radius: 10px; isolation: isolate; } .koop-team-card__content { min-height: 72px; gap: 2px; transform: translateY(-5px); } .koop-team-card__name { min-height: 2.3em; align-items: flex-end; font-size: clamp(18px, 1.18vw, 20px); line-height: 1.14; } .koop-team-card__role { min-height: 1.4em; margin-top: 4px; } .koop-team-card__image-box { width: min(100%, 292px); display: flex; align-items: flex-end; justify-content: center; padding-top: 12px; } .koop-team-card__shape { bottom: 0; width: min(100%, 288px); height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, 36%); } .koop-team-card__shape span { width: 79.86%; height: 79.86%; } .koop-team-card__image-box img { max-width: 100%; object-fit: contain; } @media (max-width:1199.98px) { .koop-team-grid { gap: 28px; } .koop-team-card { padding-inline: 20px; } .koop-team-card__content { min-height: 68px; } .koop-team-card__name { font-size: clamp(17px, 1.5vw, 19px); } .koop-team-card__role { font-size: 14px; } } @media (max-width:991.98px) { .koop-team-grid { gap: 24px; } .koop-team-card { padding-top: 16px; } .koop-team-card__content { min-height: 70px; } .koop-team-card__image-box { width: min(100%, 300px); } .koop-team-card__shape { width: min(100%, 294px); transform: translate(-50%, 34%); } } @media (max-width:767.98px) { .koop-team-grid { max-width: 420px; gap: 20px; } .koop-team-card { padding-inline: 20px; } .koop-team-card__content { min-height: auto; } .koop-team-card__name { min-height: 0; font-size: clamp(19px, 5.1vw, 21px); } .koop-team-card__role { font-size: 15px; } .koop-team-card__image-box { width: min(100%, 312px); } .koop-team-card__shape { width: min(100%, 300px); transform: translate(-50%, 33%); } } @media (max-width:460px) { .koop-team-grid { max-width: 360px; } .koop-team-card { padding: 14px 16px 0; } .koop-team-card__name { font-size: 18px; line-height: 1.16; } .koop-team-card__role { font-size: 14px; } .koop-team-card__image-box { width: min(100%, 284px); padding-top: 10px; } .koop-team-card__shape { width: min(100%, 278px); transform: translate(-50%, 34%); } } @media (max-width:360px) { .koop-team-grid { max-width: 320px; } .koop-team-card { padding-inline: 12px; } .koop-team-card__image-box { width: min(100%, 255px); } .koop-team-card__shape { width: min(100%, 250px); transform: translate(-50%, 35%); } .koop-team-card__shape span { width: 78%; height: 78%; } } .koop-team-card__shape { width: 116%; max-width: none; } @media (max-width:767.98px) { .koop-team-card { padding-top: 24px; } .koop-team-card__content { gap: 3px; } .koop-team-card__image-box { padding-top: 0; } } @media (max-width:460px) { .koop-team-card { padding-top: 23px; } .koop-team-card__content { gap: 4px; } .koop-team-card__image-box { padding-top: 1px; } } @media (min-width:768px) { .koop-team-card__name { min-height: 0; padding-top: 1.16em; align-items: flex-start; } }