:root {
    --gap: 2rem;
}

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

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

.wp-block-cb-collection,
.wp-block-cb-collections > div.wp-block-cb-collection {
    margin: 0;
}

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

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

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

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

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

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

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

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

/* === .masonry === */
.wp-block-cb-collections.masonry-2,
.wp-block-cb-collections.masonry-3,
.wp-block-cb-collections.masonry-4,
.wp-block-cb-collections.masonry-5,
.wp-block-cb-collections.masonry-6 {
    -webkit-gap: var(--gap);
    -moz-gap: var(--gap);
    column-gap: var(--gap);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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