/* La terraza y su galería.
   Parte de styles/ — se cargan en orden desde index.html. */

.galeria {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.galeria figure { margin: 0; overflow: hidden; border-radius: 3px; position: relative; }
/* La imagen es más alta que su marco: ese sobrante es el que se mueve en el parallax. */
.galeria img {
  position: absolute; inset: -13% 0 auto 0;
  width: 100%; height: 126%; object-fit: cover; will-change: transform;
}
/* Altura fija por fila (no aspect-ratio): así las dos piezas de la primera
   fila miden lo mismo y no queda un hueco debajo de la más baja.
   Tres fotos: una ancha y una vertical arriba, y una panorámica abajo. */
.galeria figure:nth-child(1) { grid-column: 1 / 8;  height: clamp(220px, 32vw, 440px); }
.galeria figure:nth-child(2) { grid-column: 8 / 13; height: clamp(220px, 32vw, 440px); }
.galeria figure:nth-child(3) { grid-column: 1 / -1; height: clamp(200px, 26vw, 380px); }

@media (max-width: 900px) {
  .galeria figure:nth-child(1) { grid-column: 1 / -1;  height: clamp(200px, 48vw, 320px); }
  .galeria figure:nth-child(2) { grid-column: 1 / 7;   height: clamp(220px, 52vw, 340px); }
  .galeria figure:nth-child(3) { grid-column: 7 / -1;  height: clamp(220px, 52vw, 340px); }
}