/* Reinicio básico para todos los elementos */
* {
    margin: 0;
    padding: 0;
    /* Incluye padding y border en el tamaño total del elemento, muy útil para layouts */
    box-sizing: border-box; 
}

/* El body por defecto puede tener márgenes; los eliminamos */
body {
    margin: 0;
    padding: 0;
    /* Previene el desplazamiento horizontal no deseado */
    overflow-x: hidden; 
}

/* Contenedor principal de las imágenes (diseño por defecto para móviles) */
main {
    /* Convierte el 'main' en un contenedor Grid */
    display: grid; 
    /* Por defecto, una columna para móviles */
    grid-template-columns: 1fr; 
    /* Elimina el espacio entre las celdas del grid */
    gap: 0; 
    /* Asegura que el contenedor principal ocupe todo el ancho del viewport */
    width: 100vw; 
}

/* Estilos para las imágenes dentro de los enlaces */
img {
    /* La imagen ocupa el 100% del ancho de su celda en el grid */
    width: 100%; 
    /* Mantiene la proporción de la imagen para evitar deformaciones */
    height: auto; 
    /* Elimina el espacio extra debajo de las imágenes (que son inline por defecto) */
    display: block; 
    /* Asegura que no haya bordes ni radios heredados o predeterminados */
    border-radius: 0; 
    /* Elimina cualquier margen o padding interno de la imagen */
    margin: 0; 
    padding: 0; 
}

/* Opcional: Estilo para los enlaces alrededor de las imágenes */
a {
    /* Los enlaces son elementos inline por defecto; en el grid, se comportarán bien al contener una imagen block, pero esto es una buena práctica */
    display: block; 
    /* Elimina el subrayado si no lo deseas en los enlaces */
    text-decoration: none; 
    /* Asegura que no haya un color de texto predeterminado si el enlace fuera visible de alguna manera */
    color: inherit; 
}


@media screen and (min-width: 768px) {
    main {
        /* Crea 3 columnas de igual ancho para pantallas más grandes */
        grid-template-columns: repeat(3, 1fr); 
    }
}