/* Defaults */
.c {
    left: 0;
    right: 0;
    width: var(--containerWidth);
    padding: var(--containerPadding);
    position: relative;
    margin: 0px auto;
}

.c:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
}

/* [L] Large */
@media (max-width: 1336px) {
    .c {
        width: var(--containerWidthL);
        padding: var(--containerPaddingL);
    }
}

/* [M] Medium */
@media (max-width: 992px) {
    .c {
        width: var(--containerWidthM);
        padding: var(--containerPaddingM);
    }
}

/* [S] Small */
@media (max-width: 768px) {
    .c {
        width: var(--containerWidthS);
        padding: var(--containerPaddingS);
    }
}

/* [XS] Extra small */
@media (max-width: 576px) {
    .c {
        width: var(--containerWidthXS);
        padding: var(--containerPaddingXS);
    }
}