:root {
    --gap: 2rem;
}

@media screen and (max-width: 768px) {
    :root {
        --gap: 1rem;
    }
}

.cb-collections .column-2,
.cb-collections .column-3,
.cb-collections .column-4,
.cb-collections .column-5,
.cb-collections .column-6,
.cb-collections .column-7,
.cb-collections .column-8,
.cb-collections .column-9 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    clear: both;
}

.cb-collections .column-2 > div {
    width: calc((100% - (1 * var(--gap))) / 2)
}

.cb-collections .column-3 > div {
    width: calc((100% - (2 * var(--gap))) / 3)
}

.cb-collections .column-4 > div {
    width: calc((100% - (3 * var(--gap))) / 4)
}

.cb-collections .column-5 > div {
    width: calc((100% - (4 * var(--gap))) / 5)
}

.cb-collections .column-6 > div {
    width: calc((100% - (5 * var(--gap))) / 6)
}

.cb-collections .column-7 > div {
    width: calc((100% - (6 * var(--gap))) / 7)
}

.cb-collections .column-8 > div {
    width: calc((100% - (7 * var(--gap))) / 8)
}

.cb-collections .column-9 > div {
    width: calc((100% - (8 * var(--gap))) / 9)
}

/* === .masonry === */

.cb-collections .masonry-2,
.cb-collections .masonry-3,
.cb-collections .masonry-4,
.cb-collections .masonry-5,
.cb-collections .masonry-6 {
    -webkit-.column-gap: 0px;
    -moz-.column-gap: 0px;
    .column-gap: 0px;
}


.cb-collections .masonry-2 > div,
.cb-collections .masonry-3 > div,
.cb-collections .masonry-4 > div,
.cb-collections .masonry-5 > div,
.cb-collections .masonry-6 > div {
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0;
    position: relative;
    -webkit-.column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-.column;
}


.cb-collections .masonry-2 {
    -moz-.column-count: 2;
    -webkit-.column-count: 2;
    .column-count: 2;
}

.cb-collections .masonry-3 {
    -moz-.column-count: 3;
    -webkit-.column-count: 3;
    .column-count: 3;
}

.cb-collections .masonry-4 {
    -moz-.column-count: 4;
    -webkit-.column-count: 4;
    .column-count: 4;
}

.cb-collections .masonry-5 {
    -moz-.column-count: 5;
    -webkit-.column-count: 5;
    .column-count: 5;
}

.cb-collections .masonry-6 {
    -moz-.column-count: 6;
    -webkit-.column-count: 6;
    .column-count: 6;
}

@media screen and (min-width: 768px) and (max-width:1024px) {

    .cb-collections .column-4 > div,
    .cb-collections .column-5 > div,
    .cb-collections .column-6 > div {
        width: calc((100% - (2 * var(--gap))) / 3)
    }

    .cb-collections .column-7 > div,
    .cb-collections .column-8 > div,
    .cb-collections .column-9 > div {
        width: calc((100% - (3 * var(--gap))) / 4)
    }

    .cb-collections .masonry-4 {
        -moz-.column-count: 3;
        -webkit-.column-count: 3;
        .column-count: 3;
    }

    .cb-collections .masonry-5 {
        -moz-.column-count: 4;
        -webkit-.column-count: 4;
        .column-count: 4;
    }

    .cb-collections .masonry-6 {
        -moz-.column-count: 4;
        -webkit-.column-count: 4;
        .column-count: 4;
    }
}

@media screen and (min-width: 480px) and (max-width:767px) {

    .cb-collections .column-3 > div,
    .cb-collections .column-4 > div,
    .cb-collections .column-5 > div {
        width: calc((100% - (1 * var(--gap))) / 2)
    }

    .cb-collections .column-6 > div,
    .cb-collections .column-7 > div {
        width: calc((100% - (2 * var(--gap))) / 3)
    }

    .cb-collections .column-8 > div,
    .cb-collections .column-9 > div {
        width: calc((100% - (3 * var(--gap))) / 4)
    }

    .cb-collections .masonry-4 {
        -moz-.column-count: 2;
        -webkit-.column-count: 2;
        .column-count: 2;
    }

    .cb-collections .masonry-5 {
        -moz-.column-count: 3;
        -webkit-.column-count: 3;
        .column-count: 3;
    }

    .cb-collections .masonry-6 {
        -moz-.column-count: 4;
        -webkit-.column-count: 4;
        .column-count: 4;
    }
}

@media screen and (max-width: 479px) {

    .cb-collections .column-2 > div,
    .cb-collections .column-3 > div {
        width: 100%
    }

    .cb-collections .column-4 > div,
    .cb-collections .column-5 > div,
    .cb-collections .column-6 > div {
        width: calc((100% - (1 * var(--gap))) / 2)
    }

    .cb-collections .column-7 > div,
    .cb-collections .column-8 > div,
    .cb-collections .column-9 > div {
        width: calc((100% - (2 * var(--gap))) / 3)
    }

    .cb-collections .masonry-6,
    .cb-collections .masonry-5,
    .cb-collections .masonry-4 {
        -moz-.column-count: 2;
        -webkit-.column-count: 2;
        .column-count: 2;
    }

}

@media only screen and (min-width: 600px) and (max-width: 850px) and (orientation: landscape) {

    .cb-collections .masonry-5-.column,
    .cb-collections .masonry-6-.column {
        -moz-.column-count: 4;
        -webkit-.column-count: 4;
        .column-count: 4;
    }
}

@media only screen and (min-width: 360px) and (max-width: 599px) {

    .cb-collections .masonry-4-.column,
    .cb-collections .masonry-5-.column,
    .cb-collections .masonry-6-.column {
        -moz-.column-count: 3;
        -webkit-.column-count: 3;
        .column-count: 3;
    }
}

@media only screen and (max-width: 360px) {

    .cb-collections .masonry-2-.column,
    .cb-collections .masonry-3-.column,
    .cb-collections .masonry-4-.column,
    .cb-collections .masonry-5-.column,
    .cb-collections .masonry-6-.column {
        -moz-.column-count: 1;
        -webkit-.column-count: 1;
        .column-count: 1;
    }
}