.container{
    display:grid;
    grid-template-columns: repeat(8,1fr);
    grid-gap: 2em 1em;
    grid-auto-rows:minmax (200px,auto);
    padding:3% 3%;
    align-items: start;
}

.name{
    grid-area: 1/3/2/5;
}

.year{
    grid-area: 2/3/3/5;
    color:grey;
    
}

.year p{
        display: flex;
    align-items: flex-end;
}

.description{
    grid-area:1/5/3/9;
    font-size: 15px;
}

.quote{
    color: #007854;
    padding: 3% 0;
}

.quote p{
        font-size: 40px;  
}

/*
.image{
    grid-area: 3/3/5/9;
}

.imageanswer{
    grid-area: 3/3/5/9;
    opacity: 0.0;
     transition-duration: .5s;
}

.imageanswer:hover{
    opacity: 1;
    transition-duration: .5s;
}
*/

.gallery{
        grid-area: 3/3/5/9;

}

.image{
    display: inline-grid;
    grid-template-columns:1fr;
    
}

.image img{
    grid-area: 1/1/2/2;
}
.image span{
    grid-area: 1/1/2/2;
    opacity: 0.0;
     transition-duration: .5s;
}

.image span:hover{
    opacity: 1;
    transition-duration: .5s;
}





.nextproject{
    grid-area: 7/6/8/9;
}

.nextproject img{
    padding-top: 3%;
}



 /*--------------footer--------------*/
   
  
.footer{
    grid-area: 10/3/11/6;
} 

.top{
    grid-area: 10/5/11/9;
}






/*--------------mobile--------------*/


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

    .container{
    display:grid;
    grid-template-columns: 1fr;
    grid-gap: 1em;
    grid-auto-rows:minmax (20px,auto);
    padding:20% 3% 3% 3%;
}
    
    
    .name{
    grid-area: 1/1/2/2;
}
    
    .year{
    grid-area: 2/3/3/5;
    color:grey;
    
}
    
    
    .description{
    grid-area:3/1/4/2;
    font-size: 15px;
}
    
.quote p{
        font-size: 28px;  
    padding:  0 10%;

}
    
    .gallery{
    grid-area: 4/1/5/2;
}



.image{
    display: inline-grid;
    grid-template-columns:1fr;
    
}

.image img{
    grid-area: 1/1/2/2;
}
.image span{
    grid-area: 1/1/2/2;
}

.image span:hover{
    display: none;
}


.nextproject{
    grid-area: 5/1/6/2;
    padding-left: 50%;

}
    
.top{
    grid-area: 33/1/34/2;
    padding-left: 20%;

}
      
.top span, .footer span{
        display: none;
    }
    
.footer{
    grid-area: 33/1/34/2;
    padding-left: 40%;
    padding-bottom: 0%;
}
    
}