// Masonry
// ––––––––––––––––––––––––––––––––––––––––––––––––––

.masonry
    column-gap: 4px

    &.fluid
        column-gap: 0px

        .item
            margin-bottom: -4px

    &.col-2
        column-count: 2
    &.col-3
        column-count: 3
    &.col-4
        column-count: 4
    &.col-5
        column-count: 5

    .item
        width: 100%
        display: inline-block

    @media screen and (max-width: $tab-screen)

        &.tab-col-

            &1
                column-count: 1
            &2
                column-count: 2
            &3
                column-count: 3
            &4
                column-count: 4
            &5
                column-count: 5

    @media screen and (max-width: $mob-lg-screen)

        &.mob-col-

            &1
                column-count: 1
            &2
                column-count: 2
            &3
                column-count: 3
            &4
                column-count: 4
            &5
                column-count: 5