@layer components{:is(.item-grid,.item-row){column-gap:var(--cards-gap)}.item-grid{padding-top:var(--plate-inset);display:grid}.item-grid>li{margin-bottom:var(--cards-rows-gap)}.item-grid{grid-template-columns:repeat(auto-fill,minmax(min(50% - 8px,210px),1fr))}.item-row{padding-block:var(--plate-inset) var(--space-md);scroll-snap-type:x proximity;grid-auto-columns:min(40%,200px);grid-auto-flow:column;display:grid}.item-row>li{scroll-snap-align:start}.item-card{grid-row:span 5;grid-template-rows:subgrid [frame] [price] [title] [worn] [gives];display:grid}.item-card>:is(a,.face){grid-row:1/-1;grid-template-rows:subgrid;display:grid}.item-card .price{grid-row:price;align-self:end}.item-card :is(h2,h3){grid-row:title}.item-card .worn{grid-row:worn}.item-card .gives{grid-row:gives}.item-card img,.item-card .noimg{aspect-ratio:1;object-fit:cover;background:var(--borderColor-default);width:100%;display:block}.item-card .noimg{border-radius:var(--media-borderRadius);corner-shape:var(--media-cornerShape)}.item-card .frame{grid-row:frame;position:relative}.item-card .frame:after{content:"";border-radius:var(--media-borderRadius);corner-shape:var(--media-cornerShape);box-shadow:inset 0 0 0 1px var(--control-transparent-bgColor-hover);pointer-events:none;position:absolute;inset:0}.item-card .preview{object-fit:cover;border-radius:var(--media-borderRadius);corner-shape:var(--media-cornerShape);opacity:0;pointer-events:none;width:100%;height:100%;transition:opacity var(--duration-fast) var(--ease-out);position:absolute;inset:0}.item-card .preview.shown{opacity:1}.item-card .play{background:color-mix(in oklab, var(--bgColor-default) 55%, transparent);width:24px;margin:0;inset:8px 8px auto auto}.item-card .frame:has(.preview.shown) .play{opacity:0}.item-card .price{font-size:var(--text-lg);margin-top:var(--space-xs);font-weight:650}.item-card :is(h2,h3){font:400 1rem/1.5 var(--font);margin:0 0 var(--space-2xs);-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.item-card .worn{color:var(--fgColor-muted);font-size:var(--text-xs)}}
