@media screen and (min-width: 800px) {
    .project-img{

        margin-top: 0;
    display: grid ;
   
   grid-template-columns: repeat(3,1fr);
 grid-auto-rows: minmax(200px,auto);
 gap: 36.5%;

    }

}
 .box{
 
    width:500%;
    height: 160%;
 }
    /*
}
.box1{
    margin-right: 100%;
}
.box2{
    margin-left: 20%;
    height: 110%;

}/*

  .box1 , .box2{
text-align: center;
   width: 150%;


}/*
 .box2{
    height: 110%;
 }*/
 /*
.box3{
   
   width: 270%;
   height: 50%;
}

    
}
*/
@media screen and (max-width: 800px) {


.project-img , .box{
    display: flex;
    flex-direction: column;
    width: 100%;
    
}

}