.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)));

  position: relative;
  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;
}