@layer components {
    .content-page {
            background: #ffffff;
        }

    .content-page__inner {
            max-width: 56rem;
            padding: 4rem var(--dashboard-section-padding-x);
        }

    @media (min-width: 48rem) {
        .content-page__inner {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    .content-page__article {
            color: var(--dashboard-color-text);
            font-size: clamp(1rem, 1.8vw, 1.125rem);
            line-height: 1.75;
        }

    .content-page__article > * + * {
            margin-top: 1.25em;
        }

    .content-page__article h1,
        .content-page__article h2,
        .content-page__article h3 {
            color: var(--dashboard-color-text);
            font-weight: 750;
            line-height: 1.15;
        }

    .content-page__article h1 {
            font-size: clamp(2rem, 5vw, 3rem);
        }

    .content-page__article h2 {
            font-size: clamp(1.5rem, 4vw, 2rem);
            margin-top: 2em;
        }

    .content-page__article h3 {
            font-size: clamp(1.25rem, 3vw, 1.5rem);
            margin-top: 1.75em;
        }

    .content-page__article a {
            color: var(--dashboard-color-brand);
            font-weight: 650;
            text-decoration: underline;
        }

    .content-page__article ul {
            padding-left: 0;
        }

    .content-page__article ol {
            list-style: decimal;
            padding-left: 1.5rem;
        }

    .content-page__article ol > li + li {
            margin-top: 1.25rem;
        }

    .content-page__article ol > li > p + p {
            margin-top: 0.75em;
        }

    .content-page__article blockquote {
            border-left: 3px solid var(--dashboard-color-border);
            color: var(--dashboard-color-text-muted);
            padding-left: 1rem;
        }

    .content-page__article img:not(.content-image) {
            max-width: 100%;
        }

    .content-page__article video {
            display: block;
            height: auto;
            margin-block: 1.5rem;
            max-width: min(24rem, 100%);
        }

    .content-page__meta {
            color: var(--dashboard-color-text-muted);
            margin-top: 0.5rem;
        }

    .content-page__share-row {
            align-items: center;
            display: flex;
            gap: 0.75rem;
        }
}