/*
 * PureCSS.com
 * https://purecss.com/examples/card-flip/
 * A card that flips on hover using CSS 3D transforms and perspective.
 */

.demo-card-flip .flip-card {
		width: 200px;
		height: 130px;
		perspective: 800px;
	}

:is(.demo-card-flip .flip-card):hover .flip-inner {
			transform: rotateY(180deg);
		}

.demo-card-flip .flip-inner {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
		transition: transform .55s ease;
	}

.demo-card-flip .flip-front,.demo-card-flip .flip-back {
		position: absolute;
		inset: 0;
		border-radius: 12px;
		backface-visibility: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .95rem;
		font-weight: 600;
		padding: 1rem;
		text-align: center;
	}

.demo-card-flip .flip-front {
		background: var(--accent);
		color: var(--bg);
	}

.demo-card-flip .flip-back {
		background: var(--violet);
		color: var(--bg);
		transform: rotateY(180deg);
	}