@layer components {
    .app-page {
            padding: var(--dashboard-section-padding-y-lg) 0;
            width: 100%;
        }

    .app-page--narrow {
            margin-left: auto;
            margin-right: auto;
            max-width: min(48rem, 100%);
        }

    .app-page--medium {
            margin-left: auto;
            margin-right: auto;
            max-width: 48rem;
        }

    .app-page--wide {
            margin-left: auto;
            margin-right: auto;
            max-width: 64rem;
        }

    .app-page__title {
            font-size: clamp(1.75rem, 4vw, 2.25rem);
            text-align: center;
        }
}