.hero-mosaic {
	display: grid;
	gap: 0;
	width: 100%;
	position: relative;
}

.hero-mosaic::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}

.mosaic-cell {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
}

.mosaic-cell img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
	padding: 0;
}

.mosaic-cell img.layer-top {
	opacity: 1;
	transition: opacity var(--mosaic-fade, 0.8s) ease-in-out;
	z-index: 2;
}

.mosaic-cell img.layer-bottom {
	z-index: 1;
}

.mosaic-cell img.layer-top.fading {
	opacity: 0;
}

.hero-mosaic-fg-wrapper {
	position: absolute;
	inset: 0;
	display: flex;
	z-index: 20;
	pointer-events: none;
}

.hero-mosaic-fg-img {
	pointer-events: auto;
	max-width: 100%;
	object-fit: contain;

	--fg-shadow-color: rgba(0, 0, 0, 0);
	--fg-shadow-x: 0px;
	--fg-shadow-y: 0px;
	--fg-shadow-blur: 0px;
	filter: drop-shadow(var(--fg-shadow-x) var(--fg-shadow-y) var(--fg-shadow-blur) var(--fg-shadow-color));
}

.mosaic-cell.d-none-desktop { 
	display: none; 
}

@media (max-width: 1024px) { 
	.hero-mosaic .mosaic-cell { display: block; } 
	.mosaic-cell.d-none-tablet { display: none !important; } 
}

@media (max-width: 767px) { 
	.hero-mosaic .mosaic-cell { display: block; } 
	.mosaic-cell.d-none-mobile { display: none !important; } 
}