.mosaic-tc {
	perspective: 900px;
}

.mosaic-tc__card {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 1.75rem;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	color: inherit;
	text-decoration: none;
	transform: rotateX(var(--mosaic-rx, 0deg)) rotateY(var(--mosaic-ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 0.15s ease-out, box-shadow 0.2s ease;
	will-change: transform;
}

a.mosaic-tc__card:focus-visible {
	outline: 3px solid var(--mosaic-color-primary, #2b4acb);
	outline-offset: 3px;
}

.mosaic-tc__icon {
	display: inline-flex;
	margin-block-end: 0.75rem;
	color: var(--mosaic-color-primary, #2b4acb);
	font-size: 2.5rem;
}

.mosaic-tc__media {
	display: block;
	margin: -1.75rem -1.75rem 1rem;
}

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

.mosaic-tc__title {
	margin: 0 0 0.4rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.mosaic-tc__text {
	margin: 0;
}

.mosaic-tc__glare {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mosaic-gx, 50%) var(--mosaic-gy, 50%), rgba(255, 255, 255, 0.45), transparent 55%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.mosaic-tc__card[data-glare="0"] .mosaic-tc__glare {
	display: none;
}

.mosaic-tc__card.is-tilting .mosaic-tc__glare {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-tc__card {
		transform: none !important;
		transition: none;
	}

	.mosaic-tc__glare {
		display: none;
	}
}