.overview-hero {background:var(--sand);padding-block:clamp(38px,6vw,88px)}
.collection-overview .overview-hero #collections-title {margin:0 0 18px;font-size:clamp(42px,6vw,88px);line-height:1.02;font-weight:800}
.overview-hero p {max-width:55ch;font-size:clamp(16px,2vw,22px);line-height:1.5;color:var(--muted)}
.overview-hero nav {display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px}
.overview-hero nav a {border-bottom:1px solid currentColor;padding-block:5px;font-weight:600}
.overview-group {padding-block:clamp(30px,5vw,65px)}
.overview-group + .overview-group {border-top:1px solid var(--line)}
.overview-group h2 {font-size:clamp(25px,4vw,44px);font-weight:700;margin:0 0 22px}
.overview-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.overview-card {display:block;background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.overview-card:hover {border-color:var(--olive)}
.overview-card:focus-visible {outline:2px solid var(--olive);outline-offset:3px}
.overview-card img {display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.overview-card>div {display:grid;grid-template-columns:1fr auto;gap:5px 8px;padding:14px}
.overview-card h3 {font-size:clamp(15px,1.6vw,22px);margin:0;line-height:1.25}
.overview-card p {grid-column:1/-1;margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:440px){.overview-grid{gap:10px}.overview-card>div{padding:10px}.overview-card p{font-size:13px}}
@media(min-width:1101px){
  #overview-stone .overview-grid:has(.overview-card:nth-child(5)) {
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}