.layout--main-wrapper {
    display: flex;
    flex-direction: column;
    float: left;
    width: 100%;
    clear: both;
}

@media (min-width: 56em) {
    .layout--main-wrapper {
        flex-direction: row;
    }
}

@media (min-width: 56em) {
    .layout__region--left-side {
        flex: 1 0;
        padding-right: 4em;
    }
}

@media (min-width: 56em) {
    .layout__region--right-side {
        flex: 0 0 18.18989em;
    }
}

.layout__region--top,
.layout__region--bottom {
    clear: both;
}