/* An introduction beside a link directory forms an editorial composition. */
.site-menu-block--grid:has(
        > .site-menu-block--group > .site-menu-block--text
    ):has(> .site-menu-link-columns) {
    --editorial-gap: var(--block-gap, var(--panel-gap, var(--bs-spacer-7)));
    gap: var(--editorial-gap);

    > .site-menu-block--group {
        --block-gap: var(--panel-gap, var(--bs-spacer-4));
    }
    > .site-menu-block--group .site-menu-block-heading {
        font-size: var(--bs-font-size-2xl);
        line-height: var(--bs-heading-line-height);
        text-wrap: balance;
    }
    > .site-menu-block--group .site-menu-block-text {
        color: var(--block-color, var(--menu-muted));
        font-size: var(--bs-font-size-sm);
    }
    > .site-menu-block--group > .site-menu-block--card .site-menu-card {
        gap: var(--panel-gap, var(--bs-spacer-4));
        padding: var(--panel-link-padding, 0);
    }
    > .site-menu-block--group > .site-menu-block--card .site-menu-link__title {
        font-weight: var(--bs-font-weight-semibold);
    }

    @container (width >= 1280px) {
        > .site-menu-link-columns {
            position: relative;
        }
        > .site-menu-link-columns::before {
            content: '';
            position: absolute;
            inset-block: 0;
            inset-inline-start: calc(var(--editorial-gap) / -2);
            border-inline-start: var(--bs-border-width) solid
                var(--menu-border, var(--bs-border-color));
            pointer-events: none;
        }
    }
    @container (width < 1280px) {
        > .site-menu-block--group {
            --block-padding: var(--bs-spacer-4);
        }
        > .site-menu-block--group .site-menu-block-heading {
            font-size: var(--bs-font-size-xl);
            text-wrap: initial;
        }
        > .site-menu-block--group
            > .site-menu-block--card
            .site-menu-card:has(.site-menu-card__image) {
            flex-direction: row;
            align-items: center;
        }
        > .site-menu-block--group > .site-menu-block--card .site-menu-card {
            padding: var(--panel-link-padding, var(--bs-spacer-4));
        }
        > .site-menu-block--group
            > .site-menu-block--card
            .site-menu-card__image {
            inline-size: 25%;
            flex: 0 0 auto;
        }
        > .site-menu-block--group
            > .site-menu-block--card
            .site-menu-link__body {
            flex: 1;
            min-inline-size: 0;
        }
    }
}