.gallery-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 290px 290px 430px;
  grid-auto-rows: auto;
}

.gallery-grid figure:nth-child(1) {
  grid-column: span 2;
}

.gallery-grid figure:nth-child(n+2):nth-child(-n+5) {
  grid-column: span 2;
}

.gallery-grid figure:nth-child(6),
.gallery-grid figure:nth-child(7) {
  grid-column: span 3;
}

.gallery-grid figure:nth-child(6) img,
.gallery-grid figure:nth-child(7) img {
  object-position: center 38%;
}

/* The new install photos are portrait images. Give them portrait frames so
   the mailbox, brace, and address marker stay in view. */
.gallery-grid figure:nth-child(n+8) {
  grid-column: span 2;
  aspect-ratio: 3 / 4;
}

.gallery-grid figure:nth-child(n+8) img {
  object-fit: contain;
}

.gallery-grid figure:last-child {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 400px 250px 250px 360px;
    grid-auto-rows: auto;
  }

  .gallery-grid figure:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: auto;
  }

  .gallery-grid figure:nth-child(n+2) {
    grid-column: span 1;
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 340px repeat(6, 300px);
    grid-auto-rows: auto;
  }

  .gallery-grid figure:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }
}