/* A consistent contact-sheet grid keeps the project index clear and calm. */
.project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.4vw, 3.5rem) clamp(1rem, 2.1vw, 2.4rem);
}

.project-card,
.project-card--wide {
  grid-column: span 1;
}

.project-caption {
  column-gap: .3125rem;
}

.project-open,
.project-card--wide .project-open {
  aspect-ratio: 4 / 3;
}

/* Keep the project index precisely aligned with the title's first line. */
.project-caption span {
  padding-top: 0;
  line-height: 1.15;
  font-size: .8rem;
  align-self: end;
}

/* Project 10 has a two-line title: align its index with line one only. */
[data-project="caion"] .project-caption span {
  align-self: start;
  margin-top: .23rem;
}

/* Individual focal points retain the architectural subject after the uniform crop. */
[data-project="luxury"] .project-open img { object-position: 50% 58%; }
[data-project="mountain"] .project-open img { object-position: 50% 64%; }
[data-project="engolasters"] .project-open img { object-position: 50% 55%; }
[data-project="oleiros"] .project-open img { object-position: 58% 58%; }
[data-project="cortals"] .project-open img { object-position: 50% 52%; }
[data-project="ocean"] .project-open img { object-position: 50% 50%; }
[data-project="east"] .project-open img { object-position: 50% 46%; }
[data-project="amsterdam"] .project-open img { object-position: 50% 46%; }
[data-project="greatfalls"] .project-open img { object-position: 54% 50%; }
[data-project="caion"] .project-open img { object-position: 52% 48%; }
[data-project="harbin"] .project-open img { object-position: 50% 57%; }
[data-project="zimbabwe"] .project-open img { object-position: 50% 50%; }

@media (max-width: 760px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem .85rem;
  }

  .project-card,
  .project-card--wide {
    grid-column: span 1;
  }

  .project-open,
  .project-card--wide .project-open {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 390px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-card,
  .project-card--wide { grid-column: span 1; }
}