@layer components {
    .inset-grouped {
        --inset-gutter: var(--horizontal-safe-space);
        --inset-pad: 1rem;
        --inset-label: light-dark(oklch(17% 0 0deg), oklch(98% 0 0deg));
        --inset-label-secondary: light-dark(
            oklch(40% 0 0deg / 0.6),
            oklch(100% 0 0deg / 0.55)
        );

        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        color: var(--inset-label);

        & .section__header,
        & .section__footer {
            padding-inline: calc(var(--inset-gutter) + var(--inset-pad));
            color: var(--inset-label-secondary);
            font-size: 0.8125rem;
        }

        & .section__header {
            margin-block-end: 0.4rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

        & .section__footer {
            margin-block-start: 0.4rem;
        }

        & .section__content {
            --inset-surface: light-dark(
                oklch(100% 0 0deg),
                oklch(calc(0.2 + var(--elevation) * 0.07) 0.004 250deg)
            );
            margin-inline: var(--inset-gutter);
            border-radius: 1.5rem;
            overflow: clip;
            background-color: var(--inset-surface);
        }
    }
}