@layer root {
    .page {
        gap: var(--body-item-spacing) 0;
    }

    .page > header {
        align-items: first baseline;
        column-gap: 4rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    @media (max-width: 539px) {
        .page > header {
            grid-template-columns: auto;
        }
    }

    .page > header > time {
    }

    .page > header,
    .page > footer {
        grid-column: content-start / content-end;
    }

    .page > header > :is(h1, h2, h3, h4, h5, h6) {
        grid-column: 1;
    }

    .page > header > time {
        grid-column: 2;
    }

    .page > article > * {
        grid-column: gutter-start / gutter-end;
    }

    .page > article > :not(blockquote, figure.code) {
        margin-inline: var(--gutter-width);
    }

    .page > article > :not(:last-child) {
        margin-block-end: var(--body-item-spacing);
    }
}