@charset "UTF-8";
/* PHOTO GRID — the rebuilt gallery on /photo-gallery.
   Not related to .photo-gallery (components/photo-gallery.scss), which still
   serves the six-image About Comfort block on /about-center and is untouched.

   Every row is internally uniform by construction: three 4:3 tiles, one 16:9
   tile, or one pair block holding two 3:4 tiles. Nothing here depends on
   source order against another stylesheet — see DESIGN.md section 3.4. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: clamp(2.313rem, 1.271rem + 3.333vw, 4.188rem);
}
@media (min-width: 800px) {
  .photo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.313rem;
  }
}

.photo-grid__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin: 0;
  border-radius: 0.375rem;
}

.photo-grid__img--wide {
  grid-column: 1/-1;
  aspect-ratio: 16/9;
}

.photo-grid__pair {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 800px) {
  .photo-grid__pair {
    gap: 1.313rem;
    max-width: 47.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.photo-grid__img--tall {
  aspect-ratio: 3/4;
}

/*# sourceMappingURL=photo-grid.css.map */