.container {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .mm-masonry {
    --gap: 3;
    --col-width: 200;
  }
}

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

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

@media (min-width: 768px) {
  .mm-masonry {
    --_col-width: var(--col-width, 270);
    --_col-width-px: calc(var(--_col-width) * 1px);
    --_gap: calc(var(--gap, 5) * 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);
  }
    .gridwidth {
        --col-width: 400;
        --gap: 2
    }
  .mm-masonry__img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
@media (max-width: 768px) {
    .mm-masonry {
        --_col-width: var(--col-width, 270);
        --_col-width-px: calc(var(--_col-width) * 1px);
        --_gap: calc(var(--gap, 5) * 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);
    }
    .gridwidth {
        --col-width: 180;
        --gap: 2
    }
    .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: 100%;
        object-fit: cover;
    }
}