/* Two half-width 720/690 photos; the minimum never clips growing copy. */
.collection-card { isolation: isolate; display: grid; min-block-size: min(47.9167vw, 100svh, 690px); color: var(--color-light); transition: color .2s; }
.collection-card__media, .collection-card__shade, .collection-card__content { grid-area: 1 / 1; }
.collection-card__media { contain: size; min-inline-size: 0; min-block-size: 0; }
/* Preserve the portrait's upper edge when wide or short cards crop the photo. */
.collection-card__image { object-position: center top; }
.collection-card__shade { background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .55)); transition: background-color .2s; }
.collection-card:focus-visible { color: var(--color-accent); outline-offset: -4px; }
.collection-card:focus-visible .collection-card__shade { background-color: rgb(0 0 0 / .2); }
@media (hover: hover) {
  .collection-card:hover { color: var(--color-accent); }
  .collection-card:hover .collection-card__shade { background-color: rgb(0 0 0 / .2); }
}
@media (prefers-reduced-motion: reduce) { .collection-card, .collection-card__shade { transition: none; } }
.collection-card__content { align-self: end; padding: 42px clamp(20px, 9.5vw, 138px); text-align: center; }
.collection-card__title { font-family: var(--font-display); font-size: 35px; font-weight: 500; line-height: 1.1; text-transform: uppercase; }
.collection-card__lead { margin-top: 15px; font-size: 18px; line-height: 25px; color: rgb(255 255 255 / .72); }
.collection-card__action { margin-top: 37px; }
@media (max-width: 639px) {
  /* One full-width 390/422 photo. */
  .collection-card { min-block-size: min(108.2051vw, 100svh); }
  .collection-card__content { padding: 34px 15px; }
  .collection-card__title { font-size: 30px; }
  .collection-card__lead { max-width: 300px; margin-inline: auto; }
  .collection-card__action { margin-top: 20px; }
}