.reference-grid--merch {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.55fr);
  grid-template-areas:
    "identity cups flag collection"
    "bags cups flag collection"
    "mat cups flag collection";
}

.reference-grid--merch .reference-card {
  aspect-ratio: 16 / 9;
}

.reference-grid--merch .reference-card--identity { grid-area: identity; }
.reference-grid--merch .reference-card--bags { grid-area: bags; }
.reference-grid--merch .reference-card--mat { grid-area: mat; }
.reference-grid--merch .reference-card--cups { grid-area: cups; }
.reference-grid--merch .reference-card--flag { grid-area: flag; }
.reference-grid--merch .reference-card--collection { grid-area: collection; }

.reference-grid--merch .reference-card--identity img {
  object-position: 50% 30%;
}

.reference-grid--merch .reference-card--tall {
  aspect-ratio: auto;
}

.reference-grid--merch .reference-card--tall img {
  position: absolute;
  inset: 0;
}

@media (min-width: 641px) {
  .reference-grid--merch .reference-card:not(.reference-card--tall) figcaption {
    padding: 2rem 0.85rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.4;
  }
}

@media (max-width: 900px) {
  .reference-grid--merch {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "identity identity identity bags bags bags"
      "mat mat mat mat mat mat"
      "cups cups flag flag collection collection";
  }

  .reference-grid--merch .reference-card--identity,
  .reference-grid--merch .reference-card--bags {
    aspect-ratio: 4 / 3;
  }

  .reference-grid--merch .reference-card--mat {
    aspect-ratio: 1600 / 739;
  }

  .reference-grid--merch .reference-card--cups,
  .reference-grid--merch .reference-card--flag {
    aspect-ratio: 739 / 1600;
  }

  .reference-grid--merch .reference-card--collection img {
    object-fit: contain;
    background: var(--ink-soft);
  }
}

@media (max-width: 640px) {
  .reference-grid--merch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "identity bags"
      "mat mat"
      "cups flag"
      "collection collection";
  }

  .reference-grid--merch .reference-card--identity,
  .reference-grid--merch .reference-card--bags {
    aspect-ratio: 1;
  }

  .reference-grid--merch .reference-card--collection {
    justify-self: center;
    width: min(100%, 26rem);
    aspect-ratio: 3 / 4;
  }
}