.flip-card {
	background: transparent;
	height: 250px;
	perspective: 1000px;
	width: 150px;
}
.flip-card-inner {
	border-radius: 15px;
	box-shadow: var(--wa-shadow-l);
	height: 100%;
	position: relative;
	text-align: center;
	transform-style: preserve-3d;
	transition: transform 0.6s;
	width: 100%;
}
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
	backface-visibility: hidden;
	border-radius: 15px;
	height: 100%;
	padding: var(--wa-space-m);
	position: absolute;
	width: 100%;
	-webkit-backface-visibility: hidden;
}
.flip-card-front {
	background: var(--wa-color-brand);
	border: var(--wa-border-style);
	color: var(--wa-color-brand-on);
}
.flip-card-back {
	background: var(--wa-color-brand-on);
	border: var(--wa-border-style);
	color: var(--wa-color-brand);
	transform: rotateY(180deg);
}