@layer component{.image-card{--image-card-radius:var(--s-radius-xl,1rem);--image-card-aspect:3 / 2;--image-card-obj-pos:50% 50%;--image-card-fit:cover;--image-card-lift:4px;--image-card-img-scale:1.05;--image-card-img-bright:1.05;--image-card-shadow-hover:var(--sf-shadow-hover,var(--sf-shadow,var(--surface-shadow-hover,0 8px 25px var(--s-shadow-color))));--image-card-focus:var(--s-accent,currentColor);--image-card-focus-offset:4px;--image-card-transition:transform .25s ease, box-shadow .25s ease;--image-card-img-transition:transform .3s ease, filter .3s ease;--ic-radius:var(--image-card-radius);--ic-aspect:var(--image-card-aspect);--ic-obj-pos:var(--image-card-obj-pos);--ic-fit:var(--image-card-fit);--ic-lift:var(--image-card-lift);--ic-img-scale:var(--image-card-img-scale);--ic-shadow-hover:var(--image-card-shadow-hover);border-radius:var(--ic-radius);width:100%;min-width:0;color:var(--sf-text,currentColor);background:var(--sf-bg,transparent);border:1px solid var(--sf-bd,transparent);box-shadow:var(--sf-shadow,none);aspect-ratio:auto;will-change:auto;backface-visibility:hidden;background-clip:padding-box;margin:0;text-decoration:none;display:block;position:relative;overflow:hidden;transform:none}.image-card.surface{--sf-radius:var(--ic-radius)}.image-card:focus-visible{outline:2px solid var(--image-card-focus);outline-offset:var(--image-card-focus-offset);border-radius:var(--ic-radius)}.image-card[data-aspect]{aspect-ratio:var(--ic-aspect)}.image-card[data-has-aspect=true]{aspect-ratio:var(--aspect,var(--ic-aspect))}.image-card :where(picture){width:100%;height:100%;margin:0;display:block}.image-card :where(picture,img){border-radius:inherit}.image-card :where(img){object-fit:var(--ic-fit);object-position:var(--ic-obj-pos);width:100%;max-width:none;display:block;transform:scale(1)}.image-card:not([data-aspect]):not([data-has-aspect=true]) :where(img){height:auto}.image-card[data-aspect] :where(img),.image-card[data-has-aspect=true] :where(img){height:100%}@media (hover:hover){.image-card{transition:var(--image-card-transition)}.image-card:hover{transform:translateY(calc(var(--ic-lift) * -1));box-shadow:var(--ic-shadow-hover)}.image-card :where(img){transition:var(--image-card-img-transition)}.image-card:hover :where(img){transform:scale(var(--ic-img-scale));filter:brightness(var(--image-card-img-bright))}}@media (prefers-reduced-motion:reduce){.image-card,.image-card :where(img){filter:none!important;transition:none!important;transform:none!important}}@media (width<=768px){.image-card,.image-card :where(picture),.image-card :where(img){width:100%}}}
