.mosaic-fi__area {
	position: relative;
	block-size: var(--mosaic-fi-h, 26rem);
}

.mosaic-fi__tile {
	position: absolute;
	inset-inline-start: var(--x, 0%);
	inset-block-start: var(--y, 0%);
	inline-size: var(--w, 30%);
	animation: mosaic-fi-float 6s ease-in-out infinite;
	animation-delay: var(--delay, 0s);
}

.mosaic-fi__tile img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.mosaic-fi__tile.is-round img {
	border-radius: 1rem;
}

.mosaic-fi--shadow .mosaic-fi__tile img {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

@keyframes mosaic-fi-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(calc(var(--d, 12px) * -1)); }
}

/* Narrow screens: a calm column instead of a crowded composition. */
@media (max-width: 40rem) {
	.mosaic-fi__area {
		display: grid;
		gap: 1rem;
		block-size: auto;
	}

	.mosaic-fi__tile {
		position: static;
		inline-size: min(100%, 24rem);
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-fi__tile {
		animation: none;
	}
}