:root{
    --left-margin: calc((100vw - (var(--wrapper-width) + var(--navigation-space))) / 2);
}

.background-blue{
    position: relative;
}

.background-blue::before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100vw;
    background-color: #e0f6fc;
    top: 0;
    left: calc(-1 * (var(--left-margin) + var(--navigation-space)));
    bottom: 0;
    z-index: -1;
}

@media only screen and (max-width: 1550px){
    .background-blue::before{
        right: 0;
        left: unset;
    }
}

@media only screen and (max-width: 1450px){
    :root{
        --left-margin: 0px;
    }

    .background-blue::before{
        right: unset;
        left: calc(-1 * (var(--left-margin) + var(--navigation-space)));
    }
}

@media only screen and (max-width: 579.99991px){
    .background-blue::before {
        left: 0;
    }
}