h2 {
  font-size: 3rem;
}

#about {
  background: var(--bg-color);
  padding-top: clamp(4rem, 2.182rem + 7.273vi, 8rem);

  & .container {
    display: flex;
    flex-direction: column-reverse;

    & img {
      width: 60%;
      height: 60%;
      margin-inline: auto;
      object-position: contain;
    }

    & .about-context {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }
}

@media only screen and (min-width:930.1px) {
  #about {
    & .container {
      flex-direction: row;
      gap: 4rem;

      & picture, .about-context {
        flex: 1;
      }

      & img {
        width: 80%;
        height: 80%;
        object-fit: contain;
      }

      & .about-context {
        max-width: 608px;
      }
    }
  }
}

/*   BENEFITS     */

#benefits {
  padding-top: clamp(4rem, 2.182rem + 7.273vi, 8rem);
  background: var(--bg-color);

  & .container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    
    & p {
      max-width: 608px;
    }

    & ul {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: space-evenly;
      list-style-type: none;

      & li {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-block: 2rem;
      }
    }
  }
}

@media only screen and (min-width: 750.1px) {
  #benefits {
    & .container {
      & ul {
        flex-direction: row;
      }
    }
  }
}

/*   CONTACT AREA    */

#contact-area {
  padding-block: clamp(1.25rem, 0.795rem + 1.818vi, 2.25rem) !important;
  background: var(--bg-alt-color);

  & .form-container {
    align-items: unset;
    flex-direction: column-reverse;
  }
}

@media only screen and (min-width: 930.1px) {
  #contact-area {

  & .form-container {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2rem;
      grid-template-rows: 1fr;
  }

  .quote-form {
      grid-column: 2/7;
      grid-row: 1;
  }

  .contact-box {
      height: 100%;
      grid-column: 7/12;
      grid-row: 1;
      justify-content: center;
  }
}
}