#about {

  background-color: #c46b6b;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% 80%;
  height: 50vh;

}

#about-content {

  display: grid;
  grid-template-columns: 29% 69%;
  grid-column-gap: 2%;
  grid-template-rows: 100%;

}

#about-content div:first-child {

  text-align: center;

}

#about-header {

  text-align: center;

}

#about-header h1 {

  color: #fff;
  font-family: 'Slabo';
  font-size: 10vh;
  margin: 2vh auto 2vh auto;

}

#about-content p {

  color: #eee;
  display: block;
  font-family: 'Slabo';
  font-size: 1.2vw;
  margin-left: 0;
  width: 70%;

}

#about img {

  border-radius: 1vw;
  height: 70%;
  margin-left: auto;
  margin-right: auto;

}

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

  #about {

    background-image: url('../img/about.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    grid-template-rows: 25% 75%;
    height: 80vh;

  }

  #about-content {

    grid-template-columns: 0% 100%;
    grid-column-gap: 0%;

  }

  #about-content p {

    background-color: #fff;
    color: #222;
    font-size: 4vw;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    padding: 4vw;
    width: 60%;

  }

  #about img {

    display: none;

  }

  #about-header h1 {

    font-size: 8vh;
    margin: 0 auto 0 auto;

  }

}