@layer base {
    .content-grid {
        --main-size: min(
            100% - (var(--site-horizontal-inset) * 2),
            var(--content-max-width)
        );
        --breakout-size: calc(
            (var(--breakout-max-width) - var(--content-max-width)) / 2
        );
        --gutter-size: minmax(var(--site-horizontal-inset), 1fr);

        display: grid;
        grid-template-columns:
            [full-width-start] var(--gutter-size)
            [breakout-start] minmax(0, var(--breakout-size))
            [content-start] var(--main-size)
            [content-end]
            minmax(0, var(--breakout-size)) [breakout-end]
            var(--gutter-size) [full-width-end];
    }

    .content-grid > :not(.breakout, .full-width) {
        grid-column: content;
    }

    .content-grid > .full-width {
        grid-column: full-width;

        .section-header {
            padding: 0;
        }
    }

    .content-grid > .breakout {
        grid-column: breakout;

        .aligned-with-content-grid > * {
            max-width: var(--content-max-width);
            margin: 0 auto;
        }
    }

    .full-width > .site-width {
        width: min(100%, var(--content-max-width));
        padding: 0 var(--site-horizontal-inset);
        margin: 0 auto;
    }

    section {
        display: grid;
        grid-auto-rows: true;
        gap: var(--spacing-12);
        padding: var(--spacing-24) 0;

        &.section-colored {
            background-color: var(--color-surface);
        }

        &.section-first {
            padding-top: var(--spacing-2);
            padding-bottom: 0;
        }

        &.section-last {
            padding-bottom: var(--spacing-12);
        }
    }

    .section-header {
        display: block;

        &.alt-1 {
            .section-title {
                font-size: min(var(--font-size-4xl), 5cqi);
                color: var(--color-text-secondary);
                display: inline;

                strong {
                    color: var(--color-text);
                    font-weight: var(--font-weight-bold);
                }
            }
        }

        &.alt-2 {
            margin: var(--spacing-12) 0 var(--spacing-6);
            display: flex;
            flex-direction: column;
            gap: var(--spacing-2);
            align-items: center;

            .section-title {
                font-size: min(var(--font-size-6xl), 10cqi);
                color: var(--color-text);
                font-weight: var(--font-weight-bold);
                display: block;
                text-align: center;
                line-height: var(--line-height-tight);
            }

            .section-subtitle {
                font-size: min(var(--font-size-3xl), 4cqi);
                color: var(--color-text-secondary);
                font-weight: var(--font-weight-normal);
                display: block;
                text-align: center;
                max-width: 50%;
                margin: 0;
            }
        }
    }
}