/* --- Estilos Base y Decoración --- */
.gallery-container {
  display: grid;
  gap: 0.75rem;
  /* Por defecto (móvil o +4 imágenes): Grid automático flexible */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  width: 100%;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Asegura que el item ocupe todo su espacio asignado */
  width: 100%;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Layouts Bento (Solo aplican en Tablet/Desktop) --- */
/* Usamos media query para que en móviles se vean uno debajo de otro o en grid simple */
@media (min-width: 768px) {
  /* Unifica la altura base para que sea consistente */
  .gallery-1,
  .gallery-2,
  .gallery-3,
  .gallery-4 {
    height: 600px; /* Altura total del contenedor bento */
    grid-auto-rows: unset; /* Desactivar filas automáticas para usar el template */
  }

  /* 1 Imagen: Full */
  .gallery-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* 2 Imágenes: Split 2/3 y 1/3 */
  .gallery-2 {
    grid-template-areas: "a b";
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
  }
  .gallery-2 .gallery-item:nth-child(1) {
    grid-area: a;
  }
  .gallery-2 .gallery-item:nth-child(2) {
    grid-area: b;
  }

  /* 3 Imágenes: 1 Arriba grande, 2 Abajo */
  .gallery-3 {
    grid-template-areas:
      "a a"
      "b c";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.5fr 1fr; /* La de arriba ocupa más espacio */
  }
  .gallery-3 .gallery-item:nth-child(1) {
    grid-area: a;
  }
  .gallery-3 .gallery-item:nth-child(2) {
    grid-area: b;
  }
  .gallery-3 .gallery-item:nth-child(3) {
    grid-area: c;
  }

  /* 4 Imágenes: Corregido para ser rectangular */
  /*
    Diseño corregido:
    [ A A B ]
    [ A A C ]
    [ D D C ]
    Ahora 'C' es una columna alta a la derecha (rectangular)
    y 'D' es una barra ancha abajo (rectangular).
  */
  .gallery-4 {
    grid-template-areas:
      "a a b"
      "a a c"
      "d d c";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .gallery-4 .gallery-item:nth-child(1) {
    grid-area: a;
  }
  .gallery-4 .gallery-item:nth-child(2) {
    grid-area: b;
  }
  .gallery-4 .gallery-item:nth-child(3) {
    grid-area: c;
  }
  .gallery-4 .gallery-item:nth-child(4) {
    grid-area: d;
  }
}