body {
    --page-width: min(85vw, 80rem);
    --sidebar-width: 13.5rem;

    width: min(100% - var(--space-lg), var(--page-width));
    margin-inline: auto;
    padding-block: 3rem var(--space-lg);
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "nav content"
        "side content";
    gap: 2rem var(--space-md);
    align-items: start;
}

body > nav {
    grid-area: nav;
}

body > main {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow-wrap: anywhere;
}

body > aside {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (max-width: 44rem) {
    body {
        --tabbar-height: calc(4.25rem + env(safe-area-inset-bottom));

        width: calc(100% - 1.5rem);
        padding-block: 1rem calc(var(--tabbar-height) + 1.5rem);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "content"
            "side";
        gap: 1.75rem;
    }

    body > main,
    body > aside {
        gap: 1.75rem;
    }
}