/*** Only used for layout background images ***/

/* XS breakpoint < 576 */
.layout.col.centerContainer {
    background-image: url('/images/BG-576-TOP.jpg'), url('/images/BG-576-BOTTOM.jpg');
    background-position: top left, bottom right;
}

/* SM breakpoint > 576 */
@media (min-width: 576px) {
    .layout.col.centerContainer {
        background-image: url('/images/BG-576-TOP.jpg'), url('/images/BG-576-BOTTOM.jpg');
        background-position: top left, bottom right;
    }
}

/* MD breakpoint > 768 */
@media (min-width: 768px) {
    .layout.col.centerContainer {
        background-image: url('/images/BG-768-TOP.jpg'), url('/images/BG-768-BOTTOM.jpg');
        background-position: top left, bottom right;
    }
}

/* LG breakpoint > 992 */
@media (min-width: 992px) {
    .layout.col.centerContainer {
        background-image: url('/images/BG-992-TOP.jpg'), url('/images/BG-992-BOTTOM.jpg');
        background-position: top left, bottom right;
    }
}

/* XL breakpoint > 1200 */
@media (min-width: 1200px) {
    .layout.col.leftContainer {
        background-image: url('/images/BG-1200-TOP-LEFT.jpg'), url('/images/BG-1200-BOTTOM-LEFT.jpg');
        background-position: top right, bottom right;
    }

    .layout.col.centerContainer {
        background-image: url('/images/BG-1200-TOP-CONTENT.jpg'), url('/images/BG-1200-BOTTOM-CONTENT.jpg');
        background-position: top left, bottom right;
    }

    .layout.col.rightContainer {
        background-image: url('/images/BG-1200-TOP-RIGHT.jpg'), url('/images/BG-1200-BOTTOM-RIGHT.jpg');
        background-position: top left, bottom left;
    }
}

/* XXL breakpoint > 1400 */
/* actually not used, will get used later */
/* ... to prevent large empty sides of the page */