.collection-intro { padding-block: clamp(2.25rem, 6vw, 4.5rem) 2rem; }
.collection-intro h1 { margin: 0 0 .75rem; font: 700 clamp(2.3rem, 6vw, 4.6rem)/1.03 var(--display); letter-spacing: -.045em; }
.collection-intro h1 em { color: var(--coral); font-style: normal; }
.collection-intro > p:last-child { color: var(--muted); max-width: 64ch; margin: 0; }
.collection-grid { padding-bottom: clamp(2.75rem, 7vw, 5rem); }
.collection-card { display: flex; flex: 1; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); text-decoration: none; }
.collection-card .card-art { display: grid; align-items: center; aspect-ratio: 4/5; border-radius: 17px 17px 0 0; box-shadow: none; }
.collection-card .card-art:hover { outline: none; }
.collection-card .card-art > img { width: 100%; max-height: none; }
.collection-card .pijamas-art-pair { grid-template-columns: 1fr 1fr; gap: 2px; background: #efe1d6; }
.collection-card .pijamas-art-pair > img { height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
.collection-card .card-content { padding: 1rem; }
.collection-card h2 { margin: 0 0 .4rem; font: 600 clamp(1.05rem, 2.35vw, 1.6rem)/1.12 var(--display); }
.collection-card p { margin-bottom: .8rem; }
.collection-card .card-link { color: var(--coral); }
.collection-card:hover .card-link { text-decoration: underline; }
@media (min-width: 360px) and (max-width: 520px) {
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .collection-card .card-content { padding: .75rem; }
  .collection-card p, .collection-card .card-link { font-size: .75rem; }
}

.collection-card:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.collection-card .card-art { overflow: hidden; }
.collection-card .card-link span { float: none; }