/* Estilos para la galería masonry */
.masonry-gallery {
    column-count: 3;           /* Número de columnas (ajusta según necesidad) */
    column-gap: 1rem;          /* Espacio entre columnas */
    padding: 1rem;
  }
  /* Responsividad: reduce el número de columnas en pantallas pequeñas */
  @media (max-width: 768px) {
    .masonry-gallery {
      column-count: 2;
    }
  }
  @media (max-width: 480px) {
    .masonry-gallery {
      column-count: 1;
    }
  }
  /* Cada enlace se comporta como bloque en el flujo de columnas */
  .masonry-gallery a {
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
    break-inside: avoid; /* Evita que los elementos se dividan entre columnas */
  }
  /* Asegura que las imágenes se adapten al ancho del contenedor */
  .masonry-gallery img {
    width: 100%;
    display: block;
    border-radius: 8px; /* Opcional, para un borde redondeado */
  }