section.about {
  width: 100vw;
}
.about-container {
  display: grid;
  grid-template-rows: 30fr;
  grid-template-columns: 750px 40%;
  grid-template-areas: "img description";
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
}
.about-image {
  width: 750px;
  height: 500px;
  background-image: url(/img/about/about-667.jpg);
  background-size: cover;
  background-position: center;
  margin-bottom: 50px;
}
.about-text > p {
  margin-left: 50px;
}

span.quote {
  font-size: 4rem;
}
div.quote {
  margin-left: 50px;
  display: flex;
  flex-direction: row;
}
.quote-right {
  margin-top: 35px;
  font-style: italic;
}
.quote-right > p {
  text-align: end;
  font-size: 0.5rem;
  margin-right: 30px;
}

@media only screen and (min-width: 800px) and (max-width: 1300px) {
  .about-image {
    width: 60vw;
    height: 40vh;
    background-size: cover;
  }
  .about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .quote-right {
    margin-right: 50px;
  }
  .about-text > p {
    margin-right: 50px;
  }
}

@media only screen and (max-width: 799px) {
  .about-image {
    width: 100vw;
    height: 40vh;
    background-size: cover;
  }

  .about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .quote-right {
    margin-right: 50px;
  }
  .about-text > p {
    margin-right: 50px;
  } 
  .container-bottom{
    padding-bottom: 15px;
  }
}

@media only screen and (min-width: 1300px) {
  section.about {
    height: 75vh;
    display: flex;
  }
}