.mm-columns {
  --col-width: var(--_col-width, 280px);
  --columns: var(--_columns, 5);
  --gap: var(--_gap, 20px);

  columns: var(--col-width) var(--columns);
  column-gap: var(--gap);
}

.mm-columns__item:not(:last-child) {
  margin-bottom: var(--gap);
}

.mm-columns__img {
  width: 100%;
  height: auto;
}


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

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

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

@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;
  }
}