.content{

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

  background: var(--c4);
}

.content-grid{

  display: grid;
  grid-template-columns: 45% 45%;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.content-head{

  font-size: 30px;
  text-align: center;
  padding-top: 1px;
  width: 90%;
  margin: auto;

  color: var(--c2);
}

.content-box{

  width: 100%;
  text-align: center;
  font-size: 20px;

  color: var(--c2);
}

.cimg{

  width: 100%;
  height: auto;
  max-width: 80%;
  transition: 1s;
}

.cimg:hover{

  transform: scale(1.05);
}

hr{

  width: 90%;
}

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

  .content-grid{

    grid-template-columns: 90%;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
}

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

  .content{

    max-width: 90%;
  }
}