:root {
    --root-page-content-max-width: 600px;
    --root-page-content-padding-x: 20px;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

.root-page-content {
    width: 100%;
    max-width: var(--root-page-content-max-width);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.root-page-content:not(.root-page-content--no-padding) {
    padding-left: var(--root-page-content-padding-x);
    padding-right: var(--root-page-content-padding-x);
}

.root-page-content--no-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.root-page-content--narrow {
    --root-page-content-max-width: 480px;
}

.root-page-content--wide {
    --root-page-content-max-width: 720px;
}

.root-full-width {
    width: 100%;
    max-width: none !important;
}

@media (max-width: 600px) {
    .root-page-content:not(.root-page-content--keep-mobile-padding) {
        max-width: 100%;
    }
}