.content{

  margin: auto;
  max-width: 70%;
  margin-top: 100px;
  padding-bottom: 70px;
  margin-bottom: 50px;
}

.content-grid{

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

}

.content-box{

  margin-top: 20px;

}

.content-head{

  font-size: 25px;
  background-color: var(--c1);
  color: var(--c2);
  padding-left: 1%;
  height: 30px;

}

.content-p{

  background: var(--c4);
  min-height: 100px;
  font-size: 20px;
  padding-left: 1%;
  padding-right: 1%;
  color: var(--c2);
  margin-top: -20px;

}

.p{

  padding-top: 10px;
}

.img-grid{

  display: grid;
  grid-template-columns: 45% 45%;
  width: 95%;
  justify-content: center;
  text-align: center;
  grid-column-gap: 2.5%;
  grid-row-gap: 0.5%;
  margin: auto;

}

img{

  width: 100%;
  height: auto;

}

.img-button{

  max-height: 500px;
  min-height: 100%;
  object-fit: cover;
  transition: transform 0.5s;

}

.img-button:hover{

  transform: scale(1.03);

}

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

  .content{

    padding-bottom: 25%;

  }

  .img-grid{

    display: grid;
    grid-template-columns: 90%;
    width: 95%;
    justify-content: center;
    text-align: center;
    grid-column-gap: 2.5%;
    grid-row-gap: 0.5%;
    margin: auto;

  }

  .img-button{

    max-height: none;
    transition: none;

  }

  .img-button:hover{

    transform: none;

  }

}

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

  .content{

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

  }

}