.layout--body {
    @apply grid grid-cols-12 lg:gap-x-8;

    .layout__region {
        @apply col-start-1 col-end-13;
    }

    .layout__region--body-prefix {
        @apply lg:col-end-4;
    }

    .layout__region--body-suffix {
        @apply lg:col-start-10;
    }

    &:has(.layout__region--body-prefix),
    &:where(.layout--has-prefix) .layout__region--body {
        @apply lg:col-start-4;
    }

    &:has(.layout__region--body-suffix),
    &:where(.layout--has-suffix) .layout__region--body {
        @apply lg:col-end-10;
    }
}