@layer components {
    .legal {
        max-width: 46rem;
        margin-inline: auto;
        padding-block: var(--space-xl);
        padding-inline: var(--space-s);
        color: var(--color-text);

        & .legal__title {
            font-family: var(--font-display);
            font-size: var(--size-step-3);

            /* Step 3 is ~42px on a phone, wide enough that a single 17-character word no longer
               fits the line — "Lizenzbedingungen" broke mid-word on /de/podmienky. The global
               `overflow-wrap: break-word` keeps that from scrolling the page, and `hyphens: auto`
               fixes the look wherever the browser ships a hyphenation dictionary, but neither is
               guaranteed, so drop a step instead. A 42px heading was oversized here anyway: this
               is a document page, not a hero. */
            @media (width < 30rem) {
                font-size: var(--size-step-2);
            }
        }

        & .legal__intro {
            margin-block-start: var(--space-s);
            color: var(--color-text-muted);
        }

        & .legal__section {
            margin-block-start: var(--space-l);
        }

        & .legal__section-title {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
        }

        & .legal__section-body {
            margin-block-start: var(--space-2xs);
            color: var(--color-text-muted);
            line-height: 1.7;
        }
    }
}