.reference-grid--textile {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.73fr) minmax(0, 1fr) minmax(0, 1.17fr);
  grid-template-areas:
    "first pavilion-a third pavilion-b"
    "second pavilion-a fourth pavilion-b";
}

.reference-grid--textile > :nth-child(1) { grid-area: first; }
.reference-grid--textile > :nth-child(2) { grid-area: second; }
.reference-grid--textile > :nth-child(3) { grid-area: pavilion-a; }
.reference-grid--textile > :nth-child(4) { grid-area: third; }
.reference-grid--textile > :nth-child(5) { grid-area: fourth; }
.reference-grid--textile > :nth-child(6) { grid-area: pavilion-b; }

.reference-grid--textile .reference-card--portrait {
  aspect-ratio: auto;
}

.reference-grid--textile .reference-card--portrait img {
  position: absolute;
  inset: 0;
}

@media (max-width: 900px) {
  .reference-grid--textile {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "first pavilion-a"
      "second pavilion-a"
      "third pavilion-b"
      "fourth pavilion-b";
  }
}

@media (max-width: 640px) {
  .reference-grid--textile {
    grid-template-areas:
      "first second"
      "pavilion-a pavilion-a"
      "third fourth"
      "pavilion-b pavilion-b";
  }

  .reference-grid--textile .reference-card--portrait {
    aspect-ratio: 3 / 4;
  }
}