@layer components {
  .contact-form {
    margin: 0 auto;
    max-width: var(--max-length-sm);
    padding: 0 var(--length-2);
    margin-bottom: var(--length-40);

    & form {
      display: flex;
      flex-direction: column;
      gap: var(--length-6);

      & label {
        display: flex;
        flex-direction: column;
        gap: var(--length-1);
      }

      & select {
        padding: var(--length-2_5) var(--length-1_5);
      }

      & input {
        padding: var(--length-2_5) var(--length-1_5);
      }

      & textarea {
        padding: var(--length-2_5) var(--length-1_5);
      }

      & button {
        margin: 0 auto;
      }
    }
  }
}