.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;
}

.description p{
    margin-bottom: 0.6em;
}


.image0{
        grid-area: 3/5/4/9;
    padding-top: 20%;
}

.image1{
        grid-area: 4/1/5/9;
}

.image2{
    grid-area: 5/1/6/9;
}

.image3{
    grid-area: 6/3/7/5;
}

.image4{
    grid-area: 6/5/7/7;
}

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

.image6{
    grid-area: 7/1/8/9;
}


.sticker2{
    grid-area: 2/1/3/2;
}
.sticker3{
    grid-area: 1/4/2/5;
}
.sticker6{
    grid-area: 3/3/4/4;
}






.nextproject{
    grid-area: 10/6/11/9;
}

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




 /*--------------footer--------------*/
   
  
.footer{
    grid-area: 20/3/21/6;
} 

.top{
    grid-area: 20/5/21/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/1/3/2;
}
       
    .description{
    grid-area:3/1/4/2;
    font-size: 15px;
}
    
.image0{
        grid-area: 4/1/5/2;
}

.image1{
        grid-area: 5/1/6/2;
}

.image2{
    grid-area: 6/1/7/2;
}

.image6{
    grid-area: 7/1/8/2;
}
    
.nextproject{
    grid-area: 15/1/16/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%;
}  
    
    
}