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

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

@media (min-width: 1280px) {
	.mm-masonry {
		--gap: 16;
		--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;
	}
}
@media (max-width: 768px) {
	.mm-masonry__img {
		width: 100% !important;
		height: auto;
		object-fit: cover;
		margin-top: 10px;
	}
}