@import url('contact-reusable.css');

body#contact-page {
  margin: 0;
  background-color: var(--white);
  a {
    text-decoration: none;
  }

  main {
    box-sizing: border-box;
    min-height: calc(100dvh - 300px);
    max-width: calc(1140px + 32px);
    margin: 0 auto;
    width: 100%;
    padding-top: clamp(80px, 8.889dvw, 128px);
    padding-left: 16px;
    padding-right: 16px;
    display: grid;
    gap: clamp(24px, 3.33dvw, 48px) clamp(40px, 5.556dvw, 80px);
    grid-template-columns: 3fr 5fr;
    grid-template-rows: max-content 1fr;

    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr
    }

    h1 {
      grid-column: span 2;
      margin: 0;
      font-weight: 700;
      line-height: normal;
      color: var(--black-2);
      font-size: clamp(24px, 2.639dvw, 38px);

      @media screen and (max-width: 768px) {
        grid-column: span 1;
      }
    }

    h2 {
      font-family: var(--font-family);
      font-size: clamp(14px, 1.667dvw, 24px);
      line-height: normal;
      font-weight: 500;
      color: var(--black-2);
    }
  }
}