@layer cards{.cards{display:flex;flex-wrap:wrap;gap:var(--base-gap);grid-column:content-start / content-end;justify-content:center;align-items:flex-start}.card{position:relative;align-items:flex-end;display:grid;width:clamp(var(--card-width-min), var(--card-width-default), 100%);overflow:hidden}.card>.image{aspect-ratio:var(--aspect-ratio);width:100%;pointer-events:none;grid-column:1;grid-row:1;position:relative}.card>.image img{transition:var(--transition-default);width:100%;height:100%;object-fit:cover;z-index:1}.card:focus>.image img,.card:hover>.image img{filter:grayscale(1)}.card .content{display:flex;flex-direction:row}}