/* Base styles (mobile-first) */

body {
    grid-template-columns: 1fr;
    grid-template-areas: 
                         "nav"
                         "header"
                         "project_description"
                         "project_details"
                         "images_carrousel"
                         "footer";
}

body > header {
    grid-area: header;
    height: 242px;
    max-height: 242px;
    padding-top: 5px;
    padding-left: 15px;
    text-align: left;
    background-image: url(../img/img-header-galo-mobile.jpg);
}

#project_description {
    grid-area: project_description;
    min-width: 320px;
    padding: 30px;
}

#project_details {
    grid-area: project_details;
    min-width: 320px;
    padding: 30px;
}

#images_carrousel {
    grid-area: images_carrousel;
    background-color: var(--intercalated-background);
    min-width: 320px;
    padding: 30px;
}

/* Tablet styles */
@media only screen and (min-width: 481px) {
    
    body {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
                         "nav nav"
                         "header header"
                         "project_description project_details"
                         "images_carrousel images_carrousel"
                         "footer footer";
    }

    body > header {
        grid-area: header;
        height: 308px;
        max-height: 308px;
        padding: 60px;
        text-align: left;
        background-image: url(../img/img-header-galo-desktop.jpg);
    }
}

/* Desktop styles */
@media only screen and (min-width: 769px) {
    
    body {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
                         "nav nav"
                         "header header"
                         "project_description project_details"
                         "images_carrousel images_carrousel"
                         "footer footer";
    }

    body > header {
        grid-area: header;
        height: 308px;
        max-height: 308px;
        padding: 60px;
        text-align: left;
        background-image: url(../img/img-header-galo-desktop.jpg);
    }
    
}