/* Módulo galeria — mosaico. Artboard 1440, contenido de x=80,6 a x=1358,9 (1278,3):
   grande 461,6 × 418,2 a la izquierda; a la derecha, fila de 208,9 con dos piezas
   (371 y 429,4) y fila de 203,8 con tres (322,5 · 272 · 198,4). Separación ≈ 7,5. */

.m-galeria {
  padding-block: var(--section-y);
  background: var(--color-bg);
}

.m-galeria__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.m-galeria__title {
  margin-top: var(--space-2);
  letter-spacing: var(--tracking-title);
}

.m-galeria__text {
  max-width: 36rem;
  margin-top: var(--space-3);
}

.m-galeria__cta { flex: none; }
.m-galeria__cta:focus-visible { outline-color: var(--color-primary); }

.m-galeria__grid {
  display: grid;
  grid-template-columns: 36.11% minmax(0, 1fr);
  gap: .6%;
  margin-top: var(--space-6);
}

.m-galeria__big { aspect-ratio: 461.6 / 418.2; }

.m-galeria__rest {
  display: grid;
  grid-template-rows: 208.9fr 203.8fr;
  gap: 1.75%; /* 7,2 de 412,7 de alto */
  min-width: 0;
}

.m-galeria__row { display: grid; gap: 1%; min-width: 0; }
.m-galeria__row--2 { grid-template-columns: 45.86fr 53.08fr; }
.m-galeria__row--3 { grid-template-columns: 39.86fr 33.62fr 24.52fr; }

.m-galeria__grid figure { position: relative; overflow: hidden; min-width: 0; }
.m-galeria__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A la derecha las fotos no deciden el alto (una foto 3:2 estiraba las filas y la grande quedaba corta):
   lo marca la grande con su aspect-ratio y las filas se lo reparten en fr. */
.m-galeria__rest .m-galeria__img { position: absolute; inset: 0; }

/* Tablet: el botón baja bajo el texto. */
@media (max-width: 63.99rem) {
  .m-galeria__head { flex-direction: column; }
}

/* Móvil: el mosaico se convierte en dos columnas parejas; con piezas de 200px
   el detalle de las fotos se pierde. */
@media (max-width: 47.99rem) {
  .m-galeria__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .m-galeria__big { aspect-ratio: 4 / 3; }
  .m-galeria__rest { grid-template-rows: auto auto; gap: var(--space-1); }
  .m-galeria__row { gap: var(--space-1); }
  .m-galeria__row--2,
  .m-galeria__row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-galeria__grid figure { aspect-ratio: 4 / 3; }
  .m-galeria__cta { width: 100%; }
}