/*Importación de la fuente Dosis*/
@font-face {
    font-family: Dosis;
    src: url("../fuentes/Dosis-VariableFont_wght.ttf");
}
/*Importación de la fuente Dosis en bold*/
@font-face {
    font-family: Dosis;
    src: url("../fuentes/Dosis-VariableFont_wght.ttf");
    font-weight: bold;
}
/* Importación de la fuente Poppins */
@font-face {
    font-family: Poppins;
    src: url("../fuentes/Poppins-Regular.ttf");
}
/* Clase que añade la propiedad de color naranja a diferentes elementos */
.colorNaranja{
    color: orange;
}
/* Configuración básica de la página para que el deslizamiento sea suave */
html {
    scroll-behavior: smooth;
}
/* Quitamos el margin y el padding del body por defecto*/
body {
	margin: 0;
	padding: 0;
} 
/* Definimos el ancho del bloque principal donde estará la galería y le añadimos un margen superior, posicionamos sus elementos hijo en dirección columna y con un alineamiento centrado en ambos ejes */
main {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
/* Centramos el encabezado, definimos su fuente y tamaño*/
main>h2{
    font-family: Dosis;
    font-size: 22px;
    text-align: center;
}
/* Marcamos el ancho máximo y el ancho principal del section  */
main>section{
    width: 100%;
    max-width: 30rem;  
}
/* Creamos el grid de la galería, con un pequeño espacio. Le añadimos un pequeño margen inferior y ponemos el box-sizing como border-box para evitar los overflows*/
main>section>div{
    display: grid;
    gap: 0.2rem; 
    margin-bottom: 1rem;
    box-sizing: border-box;
}
/* En los bloques impares creamos dos filas y 2 columnas*/
main>section>div:nth-child(odd){
    grid-template-rows: 6rem 8rem;
    grid-template-columns: 4fr 1fr;
}
/* En los bloques impares la primera imagen ocupa las 2 filas */
main>section>div:nth-child(odd)>img:nth-child(1){
    grid-row: 1 / 3; 
} 
/* En los bloques pares creamos dos filas y 2 columnas*/
main>section>div:nth-child(even){
    grid-template-rows: 8rem 6rem;
    grid-template-columns: 1fr 4fr;
}
/* En los bloques pares la segunda imagen ocupe 2 filas y empiece en a la derecha*/
main>section>div:nth-child(even)>img:nth-child(2){
    grid-column-start: 2;
    grid-row: 1 / 3; 
} 
/* Definimos el ancho y altura de las imágenes para habilitar el cover*/
main>section>div>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Imagen en caja de luz, está por defecto en display none para ser activado por el js, como está por encima, he puesto  la posición absoluta y que ocupe toda la pantalla. Añadimos un sombreado con un background color que no tenga todo el alpha. También dejamos el componente como display flex alineado verticalmente en el centro. Le añadimos la propiedad user-select como none para que no se pueda seleccionar el texto. */ 
section#sectorImgPantallaCompleta {
    display: none;
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    position: fixed;
    background-color: #000000CC; 
    justify-content: space-around;
    align-items: center;
    z-index: 50;  
    justify-content: center;
    user-select: none;
}
/* Definimos el formato de la imagen en pantalla completa, le ponemos la altura y el ancho como auto para que con el max-width y max-height ocupen lo máximo disponible de la pantalla con el object-fit contain. El position relative es para el evento de movimiento del js.*/
section#sectorImgPantallaCompleta>img#imgPantallaCompleta {  
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    position: relative;
} 
/* Definimos el estilo de los botones de hacia adelante y hacia atrás en la imagen en la caja de luz, le cambiamos el color, le ponemos un borde de color blanco y circular , marcarmos el puntero como pointer y dejamos la posición absoluta con top y bottom cero para que margin auto lo centre.*/
section#sectorImgPantallaCompleta>button{
    padding: 5px 10px; 
    color: white;
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid white; 
    font-size: 22px; 
    cursor: pointer; 
    position: absolute;
    height: 40px;
    top: 0;
    bottom: 0;
    z-index: 55;  
    margin: auto; 
}
/* Ubicamos el primer boton posicionado a la derecha*/
section#sectorImgPantallaCompleta>button:first-of-type{
    left:5rem;
}
/* Ubicamos el último boton con posicionado la izquierda*/
section#sectorImgPantallaCompleta>button:last-of-type{
    right:5rem; 
}
/* DISPOSITIVO TABLET */
@media (min-width: 767px) and (max-width: 1023px){
    /* Marcamos el ancho máximo de la sección */
    main>section{
        max-width: 50rem;  
    }
    /* Definimos el tamaño del encabezado */
    main>h2{
        font-size: 26px;
    }
    /*Cambiamos el tamaño de las fotos en las filas pares*/
    main>section>div:nth-child(even){
        grid-template-rows: 17rem 14rem;
    }
    /*Cambiamos el tamaño de las fotos en las filas impares*/
    main>section>div:nth-child(odd){ 
        grid-template-rows: 14rem 17rem;
    }
}
 /* ORDENADOR */
@media (min-width: 1024px) {
    /*Cambiamos el ancho máximo de la sección que contiene la galería*/
    main>section{
        max-width: 60rem;  
    }
    /* Definimos el tamaño del encabezado */
    main>h2{
        font-size: 28px;
    }
    /* Definimos el espacio del grid */
    main>section>div{
        gap: 1rem; 
    }
    /*Cambiamos el tamaño de las fotos en las filas pares*/
    main>section>div:nth-child(even){
        grid-template-rows: 20rem 15rem;
    }
    /*Cambiamos el tamaño de las fotos en las filas impares*/
    main>section>div:nth-child(odd){ 
        grid-template-rows: 15rem 20rem;
    }
}