
/* X-Large devices (large desktops, less than 1400px) */
@media screen and (min-width: 768px) {
    #header {
        grid-template-columns: 2fr 1fr 2fr;
        grid-template-areas:
        "search logotype secondary-menu"
        "main-menu main-menu main-menu";
    }

    #header div.logotype img {
        max-width: 6em;
    }
}


/* Large devices (desktops, less than 1200px) */
@media screen and (max-width: 1199.98px) {

}



/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 767.98px) {
}


/* X-Small devices (portrait phones, less than 576px) */
@media screen and (max-width: 575.98px) {
    /** WELCOME */
    #welcome {
        background-size: contain;
    }

    /** HEADER */
    header {
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        grid-template-areas: 
            "secondary-menu secondary-menu"
            "logotype search"
            "main-menu main-menu"
    }

    #header div.logotype img {
        max-width: 5rem;
    }

    /** SEARCH FORM **/
    #header div.header-search-form input {
        font-size: 12px;
    }

    /** NAVIGATION **/
    nav#navigation ul li a {
        font-size: 0.8rem;
    }

    /** MAIN MENU **/
    nav#main-menu > ul {
        gap: 0;
        padding: 0;
        align-items: center;
    }

    nav#main-menu > ul li {
        font-size: 0.7rem;
        flex: 1;
    }

    /** MAIN SLIDER **/
    #main-slider span {
        font-size: 2rem !important;
        font-family: "SulphurPoint-Regular" !important;
    }

    #main-slider span:nth-child(1) {
        font-family: "Messenger-Regular" !important;
        text-shadow: 0 0 5px rgb(0,0,0) !important;
    }

    #main-slider span + span {
        font-size: 1.4rem !important;
    }

    .n2-ss-slider {
        grid-template-rows: 100vh !important;
    }

    /** FRASE **/
    #frase {
        font-size: 1.1rem;
    }

    /** TOUR SECTION **/
    #tour-section {
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
            "cabezera cabezera"
            ". tour"
            ". calculadora"
    }

    #tour-section:has(#tour:hover) {
        grid-template-columns: 1fr 2fr;
    }
    
    #tour-section:has(.image1:hover) {
        grid-template-columns: 2fr 1fr;
    }
    
    #tour-section:has(#calculadora-indoor:hover) {
        grid-template-columns: 1fr 2fr;
    }
    
    #tour-section:has(.image2:hover) {
        grid-template-columns: 2fr 1fr;
    }

    #tour-section h2 {
        font-size: 3rem;
    }

    /** EL JARDIN DEL PERRI **/
    #eljardindelperri #secciones ul {
        padding: 5px;
        gap: 5px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
    }

    #eljardindelperri #secciones ul li {
        flex-basis: 32%;
    }

    #eljardindelperri #secciones ul li:nth-child(6) {
        grid-column: 1;
    }

    #eljardindelperri h2 {
        font-size: 4rem;
    }
    #eljardindelperri img {
        border-radius: px;
    }

    /** PRODUCTOS DESTACADOS **/
    #productos-destacados {
        grid-template-columns: auto;
        grid-template-rows: min-content;
    }

    #productos-destacados h2 {
        font-size: 3rem;
    }

    /** POSTS **/
    #posts {
        grid-template-columns: 1fr;
    }

    /** QUIENES SOMOS **/
    #quienes-somos {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #quienes-somos p {
        text-align: center;
    }

    /** FOOTER */
    footer {
        grid-template-columns: 1fr;
    }
}