.banner {
  width: calc(100vw - 16px);
  height: 50vh;
  background-color: #eeeef0;
  background-image: url("../img/banner.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.banner .black {
  width: 100vw;
  height: 50vh;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.7);
}
.description {
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ebdb37;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  text-shadow: 1px 1px 1px #eeeef0;
}
.description h1 {
  font-size: 4rem;
  margin-top: 64px;
}
.description h2 {
  font-size: 3rem;
}

.about {
  max-width: 1040px;
  margin: 48px auto;
}
.about1,
.about2 {
  display: flex;
  margin: 48px auto;
  align-items: center;
}
.about1 img,
.about2 img {
  border-radius: 30px;
  box-shadow: 0 0 6px 3px #565656;
}
.about1 p,
.about2 p {
  max-width: 500px;
}

@media screen and (min-width: 800px) and (max-width: 1200px) {
  .description h1,
  .description h2 {
    font-size: 3rem;
  }
  .about {
    width: calc(100vw - 80px);
  }
  .about1 img,
  .about2 img {
    width: 50%;
  }
  .about1 p,
  .about2 p {
    max-width: 300px;
  }
}

@media screen and (max-width: 799px) {
  .description h1,
  .description h2 {
    font-size: 1rem;
    text-align: center;
  }
  .description span {
    font: 0.5rem;
    text-align: center;
  }
  .about1 img,
  .about2 img {
    width: calc(100vw - 80px);
    margin: 24px auto;
  }
  .about1,
  .about2 {
    flex-direction: column;
  }
  .about1 p,
  .about2 p {
    padding: 0 12px 0 12px;
    text-indent: 1rem;
    text-align: left;
  }
}