.video-flashcard {
	--video-flashcard-radius: 22px;
	--video-flashcard-depth: 1200px;
	--video-flashcard-duration: 700ms;
	position: relative;
	width: 100%;
}

.video-flashcard__scene {
	position: relative;
	z-index: 3;
	width: 60%;
	margin: 0 20%;
	perspective: var(--video-flashcard-depth);
	transition: var(--transition-fast);

}

.video-flashcard--ratio-16-9 .video-flashcard__scene { aspect-ratio: 16 / 9; }
.video-flashcard--ratio-4-3 .video-flashcard__scene { aspect-ratio: 4 / 3; }
.video-flashcard--ratio-1-1 .video-flashcard__scene { aspect-ratio: 1; }

.video-flashcard__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform var(--video-flashcard-duration) cubic-bezier(.2, .7, .2, 1);
}

.video-flashcard.is-flipped .video-flashcard__inner {
	transform: rotateY(180deg);
}
.video-flashcard.is-flipped  .video-flashcard__scene{
	width: 100%;
	margin: 0;
}
.video-flashcard.is-flipped .video-flashcard__decor{
	opacity: 0;
}

.video-flashcard__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.video-flashcard__face--front {
	z-index: 2;
}

.video-flashcard__face--back {
	overflow: hidden;
	border-radius: var(--video-flashcard-radius);
	background: var(--color-blue-dark);
	box-shadow: 0 32px 70px var(--color-blue-dark-32);
	transform: rotateY(180deg);
}

.video-flashcard__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	transition: var(--transition-fast);
}

.video-flashcard__trigger {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	overflow: hidden;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--video-flashcard-radius);
	background: transparent;
	box-shadow: 0 28px 65px var(--color-blue-dark-35);
	cursor: pointer;
	transition: var(--transition-fast);
}

.video-flashcard__trigger:hover {
	box-shadow: 0 34px 75px var(--color-blue-dark-42);
	transform: translateY(-3px);
}

.video-flashcard__trigger:focus-visible,
.video-flashcard__close:focus-visible {
	outline: 3px solid var(--color-background-soft);
	outline-offset: 4px;
}

.video-flashcard__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-flashcard__image--left-outer,
.video-flashcard__image--left-inner,
.video-flashcard__image--right-inner,
.video-flashcard__image--right-outer {
	position: absolute;
	top: 15%;
	width: 50%;
	height: auto;
	border-radius: 10px;
	filter:brightness(.4) saturate(.5);
	box-shadow: 0 22px 52px var(--color-blue-dark-28);
	filter: brightness(.55);
}

.video-flashcard__image--left-outer {
	left: -5%;
	z-index: 1;
	transform: rotate(-20deg);
}

.video-flashcard__image--left-inner {
	left: 8%;
	top: -5%;
	z-index: 2;
	transform: rotate(-7deg);
}

.video-flashcard__image--right-inner {
	right: 8%;
	top: -5%;
	z-index: 2;
	transform: rotate(7deg);
}

.video-flashcard__image--right-outer {
	right: -5%;
	z-index: 1;
	transform: rotate(20deg);
}

.video-flashcard__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	width: 50px;
	height: 50px;
	place-items: center;
	border-radius: 50%;
	background: var(--color-background-soft);
	color: var(--color-blue-dark);
	box-shadow: 0 12px 30px var(--color-blue-dark-24);
	transform: translate(-50%, -50%);
	transition: var(--transition-fast);
}

.video-flashcard__trigger:hover .video-flashcard__play {
	transform: translate(-50%, -50%) scale(1.06);
}

.video-flashcard__play svg {
	width: 34px;
	height: 34px;
	fill: currentColor;
}

.video-flashcard__player,
.video-flashcard__player > .wpb_video_widget,
.video-flashcard__player .wpb_wrapper,
.video-flashcard__player .wpb_video_wrapper,
.video-flashcard__player iframe,
.video-flashcard__player video,
.video-flashcard__player .wp-video,
.video-flashcard__player .mejs-container {
	width: 100% !important;
	height: 100% !important;
}

.video-flashcard__player > .wpb_video_widget,
.video-flashcard__player .wpb_wrapper {
	margin: 0;
}

.video-flashcard__player .wpb_video_wrapper {
	padding: 0 !important;
}

.video-flashcard__player {
	position: absolute;
	inset: 0;
}

.video-flashcard__player iframe,
.video-flashcard__player video {
	display: block;
	border: 0;
	object-fit: contain;
}

.video-flashcard__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	padding: 0;
	border: 1px solid var(--color-white-35);
	border-radius: 50%;
	background: var(--color-blue-dark-78);
	color: var(--color-white);
	cursor: pointer;
	transition: var(--transition-fast);
}

.video-flashcard__close:hover {
	background: var(--color-blue-dark);
}

.video-flashcard__close svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.5;
}

@media (max-width: 991px) {
	.video-flashcard__scene {
		width: 70%;
		margin: 0 15%;
	}
}

@media (max-width: 767px) {
	.video-flashcard__scene {
		width: 100%;
		margin: 0;
	}
	.video-flashcard__decor{
		opacity: 0;
	}

}

@media (prefers-reduced-motion: reduce) {
	.video-flashcard__inner,
	.video-flashcard__trigger,
	.video-flashcard__play {
		transition-duration: 1ms;
	}
}