@media (min-width: 576px) {
    .mm-masonry {
        --gap: 12;
        --col-width: 252;
    }
}

@media (min-width: 768px) {
    .mm-masonry {
        --gap: 12;
        --col-width: 224;
    }
}

@media (min-width: 992px) {
    .mm-masonry {
        --gap: 12;
        --col-width: 225;
    }
}

@media (min-width: 1200px) {
    .mm-masonry {
        --gap: 12;
        --col-width: 270;
    }
}

@media (min-width: 1400px) {
    .mm-masonry {
        --gap: 12;
        --col-width: 315;
    }
}

@media (min-width: 576px) {
    .mm-masonry {
        --_col-width: var(--col-width, 280);
        --_col-width-px: calc(var(--_col-width) * 1px);

        display: var(--display, grid);
        grid-template-columns: repeat(
            auto-fill,
            minmax(var(--_col-width-px), 1fr)
        );
        grid-auto-rows: 1px;
        column-gap: var(--_gap);
    }

    .mm-masonry__item {
        /* Calc img height according column width and  image aspect ratio.
        [Image-Height] * [Column-Width] / [Image-Width] = [X] */
        --img-proportional-height: calc(
            var(--h) * var(--_col-width) / (var(--w)) + var(--gap)
        );

        grid-row-end: span var(--img-proportional-height, 240);
        overflow: hidden;
    }
}

.mm-masonry {
    --_gap: calc(var(--gap, 12) * 1px);
}

.mm-masonry__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mm-masonry__item {
    margin-bottom: var(--_gap);
}