.content{

  margin: auto;
  max-width: 70%;
  background-color: #000;
  margin-top: 100px;
  padding-bottom: 70px;
  margin-bottom: 50px;
  background: rgba(84, 226, 79, 0.5);

}

.content-grid{

  display: grid;
  grid-template-columns: 30% 30% 30%;
  width: 100%;
  justify-content: center;
  grid-gap: 2%;
}

.content-name{

  color: #fff;
  text-align: center;
  font-size: 30px;
  padding: 20px;
}

.content-box{

  width: 95%;
  margin: auto;
}

.content-img{

  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s;
}

.content-img:hover{

  transform: scale(1.03);
}

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

  .content-grid{

    display: grid;
    grid-template-columns: 45% 45%;
    width: 100%;
    justify-content: center;
    grid-gap: 2%;
  }
}

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

  .content{

    padding-bottom: 30%;
  }

  .content-grid{

    display: grid;
    grid-template-columns: 90%;
    width: 100%;
    justify-content: center;
    grid-gap: 2%;
  }
}

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

  .content{

    max-width: 90%;
    padding-bottom: 40%;
  }
}