.mosaic-flip__stage {
	block-size: 16rem;
	perspective: 1200px;
	outline-offset: 3px;
}

.mosaic-flip__inner {
	position: relative;
	inline-size: 100%;
	block-size: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s ease;
}

.mosaic-flip__face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.5rem;
	text-align: center;
	border-radius: 0.75rem;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}

.mosaic-flip__front {
	background: var(--mosaic-color-surface, #f5f6fa);
}

.mosaic-flip__back {
	color: #fff;
	background: var(--mosaic-color-primary, #2b4acb);
	transform: rotateY(180deg);
}

.mosaic-flip--vertical .mosaic-flip__back {
	transform: rotateX(180deg);
}

/* The turn. On the pointer or keyboard focus, or when view.js sets is-flipped (click and touch). */
.mosaic-flip--hover .mosaic-flip__stage:hover .mosaic-flip__inner,
.mosaic-flip--hover .mosaic-flip__stage:focus-within .mosaic-flip__inner,
.mosaic-flip .mosaic-flip__stage.is-flipped .mosaic-flip__inner {
	transform: rotateY(180deg);
}

.mosaic-flip--vertical.mosaic-flip--hover .mosaic-flip__stage:hover .mosaic-flip__inner,
.mosaic-flip--vertical.mosaic-flip--hover .mosaic-flip__stage:focus-within .mosaic-flip__inner,
.mosaic-flip--vertical .mosaic-flip__stage.is-flipped .mosaic-flip__inner {
	transform: rotateX(180deg);
}

.mosaic-flip__icon {
	display: inline-flex;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--mosaic-color-primary, #2b4acb);
}

.mosaic-flip__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
	color: inherit;
}

.mosaic-flip__text {
	margin: 0;
	max-inline-size: 28rem;
}

.mosaic-flip__button {
	display: inline-block;
	margin-block-start: 0.5rem;
	padding: 0.5em 1.2em;
	color: inherit;
	text-decoration: none;
	border: 2px solid currentColor;
	border-radius: 999px;
}

.mosaic-flip__button:hover {
	background: rgba(255, 255, 255, 0.18);
}

.mosaic-flip__button:focus-visible,
.mosaic-flip__stage:focus-visible {
	outline: var(--mosaic-focus-width, 3px) solid var(--mosaic-color-focus, currentColor);
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-flip__inner {
		transform-style: flat;
		transition: none;
	}

	.mosaic-flip__face {
		transition: opacity 0.2s ease;
		backface-visibility: visible;
		transform: none !important;
	}

	.mosaic-flip__back {
		opacity: 0;
	}

	.mosaic-flip--hover .mosaic-flip__stage:hover .mosaic-flip__inner,
	.mosaic-flip--hover .mosaic-flip__stage:focus-within .mosaic-flip__inner,
	.mosaic-flip .mosaic-flip__stage.is-flipped .mosaic-flip__inner {
		transform: none;
	}

	.mosaic-flip--hover .mosaic-flip__stage:hover .mosaic-flip__back,
	.mosaic-flip--hover .mosaic-flip__stage:focus-within .mosaic-flip__back,
	.mosaic-flip .mosaic-flip__stage.is-flipped .mosaic-flip__back {
		opacity: 1;
	}
}