/* style.css */

/* Contenedor del grid */
.mis-imagenes-destacadas-grid {
    display: grid;
    /* Define 3 columnas de igual ancho, puedes ajustar el número */
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px; /* Espacio entre las imágenes (celdas del grid) */
    justify-content: center; /* Centrar los elementos del grid si no llenan la fila */
    align-items: start; /* Alinear los elementos en la parte superior de su celda */
}

/* Estilo para cada elemento del grid (cada imagen) */
.mis-imagen-grid-item {
    line-height: 0; /* Eliminar espacio extra debajo de las imágenes */
    overflow: hidden; /* Importante para que el zoom no desborde */
    border-radius: 5px; /* Esquinas ligeramente redondeadas */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra suave */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición suave para el hover */
    display: flex; /* Para centrar la imagen dentro del div */
    justify-content: center;
    align-items: center;
}

/* Estilo para la imagen dentro del elemento del grid */
.mis-imagen-grid-item img {
    width: 100%; /* La imagen ocupa todo el ancho del contenedor del item */
    height: 100px; /* Altura fija para las imágenes, puedes ajustarlo */
    object-fit: cover; /* Recortar la imagen para que cubra el área sin distorsionarse */
    display: block; /* Eliminar espacio extra debajo de la imagen */
    transition: transform 0.3s ease-in-out; /* Transición suave solo para la imagen en el hover */
}

/* Efecto de hover en el elemento del grid */
.mis-imagen-grid-item:hover {
    transform: translateY(-5px); /* Se eleva ligeramente */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Sombra más pronunciada */
}

/* Efecto de hover en la imagen (cuando se pasa el ratón por el item) */
.mis-imagen-grid-item:hover img {
    transform: scale(1.1); /* Zoom ligero en la imagen */
}

/* Media queries para responsividad (opcional pero recomendado) */
@media (max-width: 768px) {
    .mis-imagenes-destacadas-grid {
        /* En pantallas más pequeñas, 2 columnas */
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .mis-imagenes-destacadas-grid {
        /* En móviles, 1 columna o 2 más pequeñas */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }
    .mis-imagen-grid-item img {
        height: 80px; /* Ajustar altura en móviles */
    }
}