.contact {
  padding: 20px;

  .contact--content {
    padding: 3rem;
    border-radius: 20px;
  }

  .form-fields-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;

    & h4 {
      margin: 0 0 1rem 0;
      padding-left: 4px;
    }

    & div {
    }

    & div.column-3 {
      grid-column: span 3;
    }

    & div.column-4 {
      grid-column: span 4;
    }

    & div.column-6 {
      grid-column: span 6;
    }

    & div.column-8 {
      grid-column: span 8;
    }

    & div.column-12 {
      grid-column: span 12;
    }

    @media screen and (max-width: 750px) {
      & div.column-mobile-3 {
        grid-column: span 3;
      }

      & div.column-mobile-4 {
        grid-column: span 4;
      }

      & div.column-mobile-6 {
        grid-column: span 6;
      }

      & div.column-mobile-8 {
        grid-column: span 8;
      }

      & div.column-mobile-12 {
        grid-column: span 12;
      }
    }
  }
}