/* 850px wide and under */
@media only screen and (max-width:850px) {
    .gallery{
        margin: 0px 20px;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    
    .feature{
        grid-column: 1 / 2;
    }
    
    .feature2{
        grid-column: 2 / 3;
    }
    
    .project{
        margin: 0px 20px;
    }
    
    .heading{
        margin: 0px 25px 20px 30px;
        font-size: 18px;
        line-height: 26px;
    }
    
    nav, .footer {
        width:300px;
        margin: 60px auto 60px auto;
        font-size: 18px;
    }
    
    nav img {
        width:300px;
        margin: 0 auto 20px auto;
    }
    
    .footer {
        font-size: 10px;
    }
}

/* portrait 480px wide and under */
@media only screen and (max-width:480px){
    
    .footer {
        width:200px;
        margin: 10px auto 20px auto;
        font-size: 16px;
    }
    
    nav {
        width:auto;
        height:50px;
        margin: 20px auto 20px 10px;
        font-size: 18px;
    }
    
    .logo {
        float:left;
    }
    
    .main-nav {
        float: right;
        margin: 17px 20px 20px auto;
        
    }
    
    .footer {
        font-size: 10px;
    }
    
    nav img {
        width:200px;
        margin: 0 auto 10px 0;
    }
    
    .gallery, .project{
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(1, 1fr); 
        margin:0;
    }
    
    .gallery{
        grid-auto-rows: 150px;
    }
    
    .feature{
        grid-column: 1 / 2;
    }

    .feature2{
        grid-row: 4 / 5;
        grid-column: 1 / 2;
    }
    
    .heading{
        margin: 50px 30px 20px 30px;
        grid-template-columns: repeat(1, 1fr); 
        font-size: 17px;
        line-height: 23px;
    }
    
    .title{
        font-weight: 700;
    }
    
    .large, .width2, .width3, .highlight, .title, .description{
        grid-area: span 1 / span 1;
    }
    
}