:root{--breakpoint-s:30rem;--breakpoint-m:48rem;--breakpoint-l:64rem;--breakpoint-xl:80rem;--breakpoint-2xl:120rem}.cards{--_gap:var(--space-s);--_number-of-cards:3;--_open-width:65ch;gap:var(--_gap);flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:50svh;display:flex}.cards.span-full{padding:var(--space-s)}@media (min-width:48rem){.cards{flex-direction:row}}card-item{will-change:width, height;padding:0 var(--space-s) var(--space-s) var(--space-s);border-radius:var(--border-radius);height:15ch;transition:all var(--animation-duration) var(--ease-in-out);flex-direction:column;justify-content:flex-start;display:flex;position:relative;overflow:hidden;transform:translate(0)}@media (min-width:48rem){card-item{height:auto;width:calc((100% - var(--_gap) * calc(var(--_number-of-cards) - 1)) / var(--_number-of-cards));flex:0 auto;justify-content:flex-end}}card-item>picture{z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}card-item>picture img{object-fit:cover;width:100%;height:100%}card-item header{z-index:3;align-items:center;gap:var(--space-s);padding-top:var(--space-s);margin-bottom:auto}card-item header h1,card-item header h2,card-item header h3,card-item header h4,card-item header h5,card-item header h6{font-size:var(--font-size-6);font-weight:var(--font-weight-normal);font-family:var(--font-family-sans);margin:0}card-item header>button{z-index:1;color:var(--color-neutral-900);background-color:#0000;border:0;margin-left:auto;padding:0}card-item header>button:after{content:"";z-index:3;width:100%;height:100%;position:absolute;top:0;left:0}card-item>div>.flow{width:35ch;padding:var(--space-s)}@media (min-width:80rem){card-item>div>.flow{width:45ch}}card-item>div>.flow .block{opacity:0}:is(card-item:hover,card-item:focus-within)>picture{filter:brightness(.5)saturate(1.5)}card-item:has(button:focus-visible){outline:var(--outline-width) solid var(--color-focus)}card-item[aria-expanded=true]{width:100%;height:67svh}card-item[aria-expanded=true] header button{opacity:0}card-item[aria-expanded=true]>picture{filter:brightness(.5)saturate(1.5)}card-item[aria-expanded=true]>div>.flow .block{opacity:1;transition:opacity var(--animation-duration) calc(var(--animation-duration)*.2) var(--ease-in-out)}@media (min-width:48rem){card-item[aria-expanded=true]{height:auto;width:var(--_open-width)}}:is([data-theme=light] card-item:hover,[data-theme=light] card-item:focus-within)>picture,[data-theme=light] card-item[aria-expanded=true]>picture{filter:brightness(1.4)saturate()contrast(.4)}