@layer component {
  .contact {
    .contact__inner-wrapper {
      width: min(560px, 100%);
      margin-inline: auto;
    }

    .contact__title {
      margin-block-end: 32px;
    }

    .contact__lead {
      /* font-size: calc(32 / 16 * 1rem); */
      margin-block-end: 20px;
    }

    .contact__text {
      margin-block-end: 48px;
    }

    .contact__form {
      display: grid;
      gap: 24px;
    }

    .contact__field {
      display: grid;
      gap: 6px;
    }

    .contact__field input,
    .contact__field textarea {
      padding: 10px 12px;
      border-radius: 6px;
      border: 1px solid #ddd;
      background-color: var(--c-white-bone);
    }

    .contact__button {
      margin-block-start: 16px;

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: #ccc;
        border-color: #999;
        box-shadow: none;
      }
    }

    .contact__home-link {
      display: block;
      margin-block-start: 32px;
      text-decoration: underline;
      text-underline-offset: 2px;

      &:hover {
        text-decoration: none;
        color: var(--c-magenta);
      }
    }
  }
}