function onReady() {
	if (Macy) {
		const masonry = document.querySelectorAll(".gtm-masonry");

		for (i = 0; i < masonry.length; ++i) {
			initMasonry(masonry[i]);
		}
	}
}

function initMasonry(el) {
	let $grid = el;
	let gutter =
		parseInt(window.getComputedStyle($grid).getPropertyValue("--gtm-gap")) || 0;
	let columns =
		parseInt(window.getComputedStyle($grid).getPropertyValue("--gtm-cols")) ||
		1;

	let macyInstance = Macy({
		container: $grid,
		trueOrder: true,
		waitForImages: false,
		columns: columns,
		margin: gutter,
		breakAt: {
			1200: Math.min(3, columns),
			768: 2,
			576: 1,
		},
	});

	macyInstance.runOnImageLoad(function () {
		macyInstance.recalculate(true);
	});
}

// Detecting onReady
if (document.readyState === "loading") {
	document.addEventListener("DOMContentLoaded", onReady);
} else {
	onReady();
}