/* Tuiles calibrées : une grande vaut deux petites plus la gouttière,
   proportions relevées sur la référence (636 x 313 et 636 x 657). */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6875rem 1.5rem;
}

/* Mosaïque : tuiles calibrées, une grande vaut deux petites plus la gouttière. */
.gallery__grid--masonry {
  grid-auto-rows: clamp(9rem, 5.28rem + 15.87vw, 19.5625rem);
  grid-auto-flow: row dense;
}

/* Grille simple : deux visuels au même cadrage. */
.gallery__grid--grid .gallery__item { aspect-ratio: 630 / 499; }
.gallery__grid--grid .gallery__item--large { grid-row: auto; }

.gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  background: var(--gl-bg-soft);
}

.gallery__item--large { grid-row: span 2; }

/* Colonne forcée quand la maquette impose un côté précis. */
.gallery__item[style*="--gl-col"] { grid-column: var(--gl-col); }

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--gl-ease);
}
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.05); }

.gallery__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 1.25rem 1.125rem;
  font-family: var(--gl-font-head);
  font-size: var(--gl-fs-h5);
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  background: linear-gradient(to top, rgba(30, 28, 26, 0.72), rgba(30, 28, 26, 0));
}

@media (max-width: 47.99em) {
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gallery__item { aspect-ratio: 4 / 3; }
  .gallery__item--large { grid-row: auto; aspect-ratio: 3 / 4; }
}