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

@media (min-width: 1024px) {
  .mm-masonry {
    --gap: 24;
    --col-width: 300;
  }
}

@media (min-width: 1280px) {
  .mm-masonry {
    --gap: 24;
    --col-width: 394;
  }
}

@media (min-width: 768px) {
  .mm-masonry {
    --_col-width: var(--col-width, 280);
    --_col-width-px: calc(var(--_col-width) * 1px);
    --_gap: calc(var(--gap, 20) * 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)));

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

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

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