body, html {
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
body {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Keeps the image fixed during scrolling */
}

/* Estilos para el logo */
.logo-b {
    position: fixed;
    top: 30px;
    left: 30px;
 	 z-index: 10;
}
.logo-b img {
    max-width: 43%;
    height: auto;
}

/* Contenedor de las imágenes */
.container {
    display: flex; /* Cambiará a columna en pantallas más pequeñas */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 25px; /* Espacio entre las imágenes */
	padding-top: 350px; /* Espacio para el logo */
    width: 100%;
}

.container a img {  
    width: 100%;  
    max-width: 300px; 
    height: auto; 
    transition: transform 0.5s ease-in-out, filter 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; /* Aumentar la duración y cambiar el timing de transform */
    will-change: transform, filter, box-shadow, opacity;
    opacity: 0.9; 

}

.container a:hover img {
    opacity: 1; 
    filter: drop-shadow(0 0 8px #ffffff);
    transform: scale(1.05); /* Aumentar tamaño */

}}

/* Media Queries para ajustar tamaños en diferentes resoluciones */
@media (max-width: 1920px) {
    .container a img {       
		max-width: 200px;   
    }
}

/* Media Queries para pantallas más pequeñas */
@media (max-width: 840px) {
    .logo-b {
		position: absolute; 
        top: 10%; 
        left: 50%; 
        transform: translate(-50%, -10%);     
    }	
	.logo-b img {
		max-width: 100%;
		height: auto;
	}	
    .container {
        flex-direction: column;
        gap: 50px; /* Espacio para pantallas pequeñas */
		padding-top: 350px;
    }
	.container a:last-child img {
			margin-bottom: 100px; /* Margen adicional para la última imagen */
		}	
    .container a img {
        max-width: 300px; /* Ancho máximo para móviles */
    }
}