@layer components {
  .form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
  }

  .form > .field {
    grid-column: span var(--field-span, 6);
  }

  .form__submit {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    font-family: var(--font-family-display);
    font-size: var(--font-size-lg);
    letter-spacing: 0.02em;

    &:disabled {
      opacity: 0.6;
      cursor: progress;
    }
  }

  .form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .form__feedback {
    grid-column: 1 / -1;
    font-size: var(--font-size-sm);
    line-height: 1.4;

    &:empty {
      display: none;
    }

    &[data-form-feedback="error"] {
      color: var(--color-red);
    }

    &[data-form-feedback="success"] {
      color: var(--color-brand-green-dark);
    }
  }

  @media (max-width: 768px) {
    .form > .field {
      grid-column: 1 / -1;
    }
  }
}