@media (max-width: 1200px) {
  html {
    font-size: 0.7vw;
  }

  .header {
    margin-top: 8em;
    padding: 2em 14em 10em;
  }

  .header__title {
    font-size: 18em;
    margin-bottom: 0.166em;
    letter-spacing: 0.055em;
  }

  .header__subtitle {
    transform: translateY(1em);
  }

  .header__quote {
    max-width: 20em;
  }
}

@media (max-width: 800px) {
  html {
    font-size: 0.7vw;
  }

  .menu__button {
    font-size: 30px;
  }

  .header {
    margin-top: 5em;
    padding: 2em 14em 10em;
  }

  .header__title {
    font-size: 18em;
    margin-bottom: 0.166em;
    letter-spacing: 0.055em;
  }

  .header__subtitle {
    display: none;
  }

  .header__quote {
    font-size: 3.4em;
    max-width: 20em;
  }

  .heading {
    font-size: 9rem;
  }

  .paragraph {
    font-size: 4.2rem;
    line-height: 1.45em;
    margin-bottom: 1.75em;
  }

  .btn {
    font-size: 3.6rem;
    line-height: 3em;
  }

  .info {
    max-height: 92em;
  }

  .info__container {
    width: 100%;
  }

  .info__paragraph p:first-child {
    width: 54%;
  }

  .info__container--image {
    position: absolute;
    width: 54em;
    right: 0;
    margin-top: 16em;
    margin-bottom: auto;
  }

  .info.about--changed {
    max-height: 260em;
  }

  #contact .info__container--image {
    display: none;
  }

  .contact__info,
  .contact__text,
  .contact__textarea {
    font-size: 3.2rem;
    line-height: 2.7em;
  }

  .contact__text:focus + .contact__info,
  .contact__text:valid + .contact__info,
  .contact__textarea:focus + .contact__info,
  .contact__textarea:valid + .contact__info {
    font-size: 2.7em;
  }

  .contact__warning {
    font-size: 3rem;
  }

  .contact .btn {
    padding: 0 1.5em;
  }

  .gallery {
    gap: 8.1em;
  }

  .articles {
    gap: 2em;
  }

  .articles__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5em;
  }

  .articles .articles__article {
    width: 58%;
    transform: none;
  }

  .articles .articles__article:hover {
    transform: translateX(0);
  }

  .articles__img-container {
    align-self: flex-start;
    width: 58%;
    height: 23.5em;
  }

  .articles__article:nth-child(2n-1) .articles__img-container {
    align-self: flex-end;
  }

  .articles__title {
    font-size: 5em;
  }

  .articles__paragraph {
    max-height: 11em;
  }

  .articles__paragraph--changed {
    max-height: 88em;
  }

  .btn--social {
    font-size: 6rem;
    line-height: 2em;
  }
}