@layer components {
    .auth-page.app-page--narrow {
            max-width: min(34rem, 100%);
            padding-left: var(--dashboard-section-padding-x);
            padding-right: var(--dashboard-section-padding-x);
        }

    .auth-page {
            display: grid;
            gap: 1.5rem;
            padding-bottom: 3rem;
            padding-top: clamp(2rem, 7vw, 4rem);
        }

    .auth-page__switch {
            color: var(--dashboard-color-text-muted);
            font-size: 0.9375rem;
            line-height: 1.5;
            text-align: center;
        }

    @media (min-width: 48rem) {
        .auth-page.app-page--narrow {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }
}