@scope (.form-page) {
  :scope {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 40rem;
    margin-inline: auto;
  }

  .form-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .form-page__title {
    font-size: var(--text-heading-3);
    font-weight: var(--font-semibold);
    color: var(--color-text-heading);
  }

  .form-page__subtitle {
    font-size: var(--text-body-sm);
    color: var(--color-text-secondary);
  }

  :scope.form-page--wide {
    max-width: 56rem;

    & .form {
      max-width: 56rem;
    }
  }
}