.project{
    display: grid;
    grid-gap: 60px;
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
    margin-bottom: 15vh;
    margin-top: 8%;
    margin-left: 20%;
    margin-right: 20%;
}


.img-proj img{
    width: 340px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: -40px;    

}



.project1{
    padding-top: 25%;
}

.project2{
    padding-top: 25%;
    
}

.project3{
    padding-top: 52%;
    
}

.plat img{
    width: 500px;
}

.break{
    display: none;
}


.button{
    margin-top: 4vh;
    font-size: 120%;
    background-color: rgb(255, 214, 31);
    color: white;
    padding: 10px 16px;
    text-align: center;
    display: inline-block;
    border: 1px solid rgb(173, 25, 47, 0);
    text-decoration: none;
    cursor: pointer;
}




@media (max-width: 1200px){
    .project{


        display: grid;
        grid-gap: 60px;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 15vh;
        margin-top: 40px;
        margin-left: 0;
        margin-right: 0;
      }

      
      .room{
        padding-top: 13vh;
    }

    .project1, .project2, .project3, .project4, .project5{
      padding-top: 20px;
  }
  
  .img-proj img{
      width: 250px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: -40px;    
  
  }

  .plat img{
      width: 340px;
  }

  .containerbox{
      margin: 10%;
  }


    }




@media (max-width: 991px){
    .project{
        
        display: grid;
        grid-gap: 60px;
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 15vh;
        margin-top: 40px;
        margin-left: 0;
        margin-right: 0;
      }

      .room{
          padding-top: 13vh;
      }

      .project1, .project2, .project3, .project4, .project5{
        padding-top: 20px;
    }
    
    .img-proj img{
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
        margin-bottom: -40px;    
    
    }

    .plat img{
        width: 340px;
    }

    .break{
        display: block;
        margin-top: 20px;
        border: 0;
      opacity: 0.4;
      height: 2px;
      position:relative;
      background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.65)), color-stop(90%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* IE10+ */
      background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    }
}

@media (max-width: 350px){
    .plat img{
        width: 280px;
    }
}