@charset "utf-8";
/* CSS Document */



.home-stage {
    display: grid;
    grid-template-columns: 33% 33% 33% ;
}   

.home-content {
    grid-column: 1 / 4;
}

.painting-gallery {
    display: grid;
    grid-template-columns: 66.6666666666% 33.33333333333%;
}

.paintings {
    display: grid;
    grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
    column-gap: 2%;
    row-gap: 10px;
} 

.grid-across-2-columns {
    grid-column: 2 / 4;    
}

.grid-across-1-2-columns {
    grid-column: 1 / 3;
}

.grid-across-3-4-columns {
    grid-column: 3 / 5;
}

.grid-front {
    grid-column: 1 / 2;
    grid-row: 2 / 4
}

.grid-back {
    grid-column: 1/ 5;
}

nav, footer {
    display: grid;
    grid-template-columns: repeat(9, 11.1111111111%);
}

.home-nav {
    display: grid;
    grid-template-columns: 100%;
}

.contact-content, .contact-head, .contact-content, .about{
    display: grid;
    grid-template-columns: 50% 50%;
}

.about h1 {
    grid-column: 1 / 3;
    text-align: center;
}


@media only screen and (max-width: 1200px) {

    .paintings {
    grid-template-columns:100%;
    column-gap: 2%;
    row-gap: 10px;
    }

    .grid-across-2-columns {
        grid-column: 1 / 2;    
    }
    
    .grid-across-1-2-columns {
        grid-column: 1 / 2; 
    }
    
    .grid-across-3-4-columns {
        grid-column: 1 / 2; 
    }
    
    .grid-front {
        grid-column: 1 / 2; 
        grid-row: 2 / 4
    }
    
    .grid-back {
        grid-column: 1/ 5;
    }

} 

@media only screen and (max-width: 1000px) {

    .about {
    grid-template-columns: 100%;
    }

    .about h1 {
    grid-column: 1 / 2;
    text-align: center;
}

} 

@media only screen and (max-width: 800px) {	

    footer {
        grid-template-columns: auto;
    }

    .painting-gallery {
        display: grid;
        grid-template-columns: 100%;
    }  

    .hide-title {
        grid-column: 1 / 3;        
    }

    .home-stage {
    display: grid;
    grid-template-columns: 100% ;
}

.home-content {
    grid-column: 1 / 2;
}
    
}