.mosaic-mask {
	--mosaic-mask-width: min(100%, 26rem);
	display: flex;
	/* a fixed width from the page settings must not make the shape wider than its column on a phone */
	min-inline-size: 0;
	max-inline-size: 100%;
}

.mosaic-mask__link {
	display: block;
	inline-size: min(var(--mosaic-mask-width), 100%);
	max-inline-size: 100%;
}

.mosaic-mask > .mosaic-mask__shape {
	inline-size: min(var(--mosaic-mask-width), 100%);
	max-inline-size: 100%;
}

.mosaic-mask__link > .mosaic-mask__shape {
	inline-size: 100%;
}

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

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

.mosaic-mask__shape--circle { border-radius: 50%; }
.mosaic-mask__shape--rounded { border-radius: 1.5rem; }
.mosaic-mask__shape--blob { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
.mosaic-mask__shape--arch { border-radius: 999px 999px 0 0; }
.mosaic-mask__shape--hexagon { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.mosaic-mask__shape--diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mosaic-mask__shape--triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mosaic-mask__shape--star { clip-path: polygon(50% 2%, 61% 36%, 98% 36%, 68% 57%, 79% 92%, 50% 71%, 21% 92%, 32% 57%, 2% 36%, 39% 36%); }