.flow {
    position: relative;
}

.flow--content,
.flow--frame {
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
}

.flow--outside {
    left: 50%;
    margin-left: calc(-50vw + (var(--scrollbarWidth) / 2));
    margin-right: calc(-50vw + (var(--scrollbarWidth) / 2));
    right: 50%;
    width: calc(100vw - var(--scrollbarWidth));
}

/* Responsive */

/* Mobile landscape >= 480 */
@media (min-width: 30rem) {
    .flow--content,
    .flow--frame {
        padding: 0 2rem;
    }
}

/* Tablet landscape >= 992 */
@media (min-width: 62rem) {
    .flow--content,
    .flow--frame .flow--content .flow--maximum-width {
        max-width: 45.250rem;
    }

    .flow--frame,
    .flow--frame .flow--content {
        max-width: 62rem;
    }

    .flow--frame .page-content .main-column > *:not(.flow) {
        max-width: 42.250rem;
    }
}

/* No flow at all (multicolumn) */
.flow--none > .flow--outside > .flow--content,
.flow--none > .flow--outside > .flow--frame {
    margin-left: initial;
    margin-right: initial;
    max-width: initial;
    padding: 0;
}

.flow--none > .flow--outside {
    left: initial;
    margin-left: initial;
    margin-right: initial;
    right: initial;
    width: initial;
}