:root {
    --shell-gutter: 28px;
    --shell-max-width-public: 1480px;
    --shell-max-width-app: 1640px;
    --shell-max-width-auth: 1560px;
    --reading-max-width: 1120px;
}

body.app-shell {
    min-width: 1024px;
}

#page.site-page,
#page.site-page-public {
    width: min(var(--shell-max-width, var(--shell-max-width-public)), calc(100vw - (var(--shell-gutter) * 2)));
    max-width: none;
    margin: 18px auto 40px;
}

body.app-shell-public {
    --shell-max-width: var(--shell-max-width-public);
}

body.app-shell-auth {
    --shell-max-width: var(--shell-max-width-auth);
}

body.app-shell-public #content.site-content {
    max-width: none;
}

body.app-shell-auth #content.site-content {
    max-width: none;
}

@media (max-width: 1440px) {
    :root {
        --shell-gutter: 20px;
    }
}

@media (max-width: 1200px) {
    :root {
        --shell-gutter: 14px;
    }

    body.app-shell {
        min-width: 0;
    }
}