/* .popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    top: 150;
    left: 400;
    right: 400;
    bottom: 150;
    width: 100%;
    max-width: 800px;
    height: auto;
    overflow: hidden;
} */
#popup {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    justify-content: center;
    align-items: center;
}

#popup-content {
    background: white; /* Fondo del contenido */
    padding: 20px;
    border-radius: 8px;
}
.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery img {
    max-width: 100%; /* Asegura que la imagen nunca exceda el tamaño del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

@media (max-width: 768px) {
    .popup-content {
        width: 100%; /* El popup ocupará toda la pantalla en móviles */
        max-width: none; /* No aplicar el límite de tamaño máximo */
        height: auto; /* Permite que el popup se expanda según el contenido */
    }

    .gallery img {
        width: 100%; /* Asegura que la imagen ocupe todo el ancho disponible */
        max-height: 60vh; /* La imagen no será más alta que el 60% del viewport */
        object-fit: cover; /* Ajusta la imagen si es necesario */
    }
}