.mosaic-ir {
	margin: 0;
}

.mosaic-ir__stage a {
	display: block;
}

.mosaic-ir__media {
	display: block;
	overflow: hidden;
}

.mosaic-ir__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mosaic-ir__ratio-auto img { block-size: auto; }
.mosaic-ir__ratio-square { aspect-ratio: 1 / 1; }
.mosaic-ir__ratio-4-3 { aspect-ratio: 4 / 3; }
.mosaic-ir__ratio-3-2 { aspect-ratio: 3 / 2; }
.mosaic-ir__ratio-16-9 { aspect-ratio: 16 / 9; }
.mosaic-ir__ratio-3-4 { aspect-ratio: 3 / 4; }

.mosaic-ir__caption {
	margin-block-start: 0.5rem;
	font-size: 0.9em;
}

/* The wipes use a clip that is opened by .is-in. Logical start and end come from the page direction. */
.mosaic-anim-ready .mosaic-ir:not(.is-in) .mosaic-ir__media {
	animation: mosaic-ir-failsafe 0.01s 4s forwards;
}

.mosaic-ir__media {
	transition: clip-path var(--mosaic-ir-t, 1s) cubic-bezier(0.65, 0, 0.35, 1);
}

.mosaic-ir--start .mosaic-ir__media { clip-path: inset(0 0 0 0); }

.mosaic-anim-ready .mosaic-ir--start:not(.is-in) .mosaic-ir__media { clip-path: inset(0 100% 0 0); }
.mosaic-anim-ready .mosaic-ir--end:not(.is-in) .mosaic-ir__media { clip-path: inset(0 0 0 100%); }
[dir="rtl"].mosaic-anim-ready .mosaic-ir--start:not(.is-in) .mosaic-ir__media,
[dir="rtl"] .mosaic-anim-ready .mosaic-ir--start:not(.is-in) .mosaic-ir__media { clip-path: inset(0 0 0 100%); }
[dir="rtl"].mosaic-anim-ready .mosaic-ir--end:not(.is-in) .mosaic-ir__media,
[dir="rtl"] .mosaic-anim-ready .mosaic-ir--end:not(.is-in) .mosaic-ir__media { clip-path: inset(0 100% 0 0); }
.mosaic-anim-ready .mosaic-ir--up:not(.is-in) .mosaic-ir__media { clip-path: inset(100% 0 0 0); }
.mosaic-anim-ready .mosaic-ir--down:not(.is-in) .mosaic-ir__media { clip-path: inset(0 0 100% 0); }
.mosaic-anim-ready .mosaic-ir--center:not(.is-in) .mosaic-ir__media { clip-path: inset(0 50% 0 50%); }

.mosaic-ir--zoom .mosaic-ir__media img {
	transition: transform var(--mosaic-ir-t, 1s) ease-out;
}

.mosaic-anim-ready .mosaic-ir--zoom:not(.is-in) .mosaic-ir__media img {
	transform: scale(1.35);
}

@keyframes mosaic-ir-failsafe {
	to {
		clip-path: inset(0 0 0 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-ir__media,
	.mosaic-ir__media img {
		transition: none;
		animation: none !important;
		clip-path: none !important;
		transform: none !important;
	}
}