.masonry {
    transition: all .5s ease-in-out;
    column-gap: 30px;
    column-fill: initial;
}

.masonry .masonry-item {
    margin-bottom : 30px;
    /* display       : inline-block; */
    vertical-align: top;
}

.masonry .masonry-item img {
    transition         : all .5s ease-in-out;
    backface-visibility: hidden;
    width              : 100%;
}

.masonry .masonry-item:hover img {
    opacity: .75;
}

/* Masonry on tablets */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .masonry {
        column-count: 3;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .masonry {
        column-count: 3;
    }
}

@media (min-width: 1201px) {
    .masonry {
        column-count: 4;
    }
}