#collections .collection-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
#collections .collection-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#e5e2d9;color:#fff}
#collections .collection-tile picture,#collections .collection-tile img{display:block;width:100%;height:100%}
#collections .collection-tile img{object-fit:cover}
#collections .collection-tile::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(24,32,27,.86));pointer-events:none}
#collections .collection-number{position:absolute;top:22px;left:24px;font:600 12px/1.5 var(--sans);letter-spacing:.12em;z-index:1}
#collections .collection-tile-placeholder .collection-number{color:var(--green)}
#collections .collection-placeholder{position:absolute;top:38%;left:24px;right:24px;text-align:center;font:400 13px/1.6 var(--sans);color:#59605a}
#collections .collection-copy{position:absolute;z-index:1;left:24px;right:24px;bottom:26px;display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:12px;row-gap:9px}
#collections .collection-copy strong{grid-column:1/-1;font:400 clamp(22px,2vw,27px)/1.2 var(--serif);letter-spacing:-.02em}
#collections .collection-copy small{font:400 14px/1.6 var(--sans);min-height:3.2em;color:#f2f1ec}
#collections .collection-arrow{align-self:end;font:400 23px/1.4 var(--sans)}
#collections .collection-tile:focus-visible{outline:3px solid var(--green);outline-offset:4px}
@media(min-width:761px) and (max-width:1100px){#collections .collection-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#collections .collection-tiles{grid-template-columns:1fr;gap:20px}#collections .collection-copy{left:22px;right:22px;bottom:24px}#collections .collection-copy strong{font-size:26px}}
@media(max-width:360px){#collections .collection-copy strong{font-size:22px}#collections .collection-copy small{font-size:13px;min-height:4.8em}}