root {
	--desk: 4;
	--tap: 2;
	--mobile: 1;
	--opacityO: 1;
	--opacityE: 1;
	--animationO: fadeIn 1s ease-in-out 0s;
	--animationE: fadeIn 1s ease-in-out 0s;
}

/* Base grid-item styling */
.K_Max .grid-item {
	overflow: hidden;
	break-inside: avoid;
}

/* Grid layout */
.K_Max.layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--desk), 1fr);
	gap: 10px;
}
.K_Max.layout-grid .desk-odd {
	opacity: var(--opacityO);
	animation-fill-mode: both;
}
.K_Max.layout-grid .desk-even {
	opacity: var(--opacityE);
	animation-fill-mode: both;
}
.K_Max.layout-grid .desk-odd.start_animation {
	animation: var(--animationO);
}
.K_Max.layout-grid .desk-even.start_animation {
	animation: var(--animationE);
}

/* Masonry layout */
.K_Max.layout-masonry {
	column-count: var(--desk);
	column-gap: 10px;
}
.K_Max.layout-masonry .grid-item {
	/* override grid gutter */
	margin: 0 0 10px;
}

/* Tablet breakpoint */
@media (max-width: 1024px) {
	.K_Max.layout-grid {
		grid-template-columns: repeat(var(--tap), 1fr);
	}
	.K_Max.layout-masonry {
		column-count: var(--tap);
	}
	.K_Max.layout-grid .tablet-odd,
	.K_Max.layout-grid .tablet-even {
		animation-fill-mode: both;
	}
	.K_Max.layout-grid .tablet-odd.start_animation {
		animation: var(--animationO);
	}
	.K_Max.layout-grid .tablet-even.start_animation {
		animation: var(--animationE);
	}
}

/* Mobile breakpoint */
@media (max-width: 767px) {
	.K_Max.layout-grid {
		grid-template-columns: repeat(var(--mobile), 1fr);
	}
	.K_Max.layout-masonry {
		column-count: var(--mobile);
	}
	.K_Max.layout-grid .mobile-odd,
	.K_Max.layout-grid .mobile-even {
		animation-fill-mode: both;
	}
	.K_Max.layout-grid .mobile-odd.start_animation {
		animation: var(--animationO);
	}
	.K_Max.layout-grid .mobile-even.start_animation {
		animation: var(--animationE);
	}
}