:root {
	--basicFlipCardWidth: 400px !important;
	--basicFlipCardHeight: 600px !important;
	--flipSize: 10%;
}

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


.flip-card {
	display			: block;
	background-color	: transparent;
	width			: var(--basicFlipCardWidth);
	aspect-ratio		: 1 / 1;
	perspective		: 1000px;
	margin-bottom		: 1em;
	position		: relative;
	height			: 600px;
	margin			: 0px auto;
}

.flip-card img {
	width     : var(--basicFlipCardWidth);
	min-width : var(--basicFlipCardWidth);
	max-width : var(--basicFlipCardWidth);
}

.flip-card-inner {
	display                    : block;
	position                   : relative;
	width                      : var(--basicFlipCardWidth);
	height                     : var(--basicFlipCardHeight);
	text-align                 : center;
	transition                 : transform 0.6s;
	transform-style            : preserve-3d;
}

.flip-card-front, .flip-card-back {
	display                    : block;
	position                   : absolute;
	width                      : 100%;
	height                     : 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility        : hidden;
}

.flip-card-front {
	display                    : block;
	color                      : black;
}

.flip-card-back {
	display                    : block;
	color                      : white;
	transform                  : rotateY(180deg);
}

.flipCardSize {
	width                      : var(--basicFlipCardWidth);
	min-width                  : var(--basicFlipCardWidth);
	max-width                  : var(--basicFlipCardWidth);
	height                     : var(--basicFlipCardWidth);
	min-height                 : var(--basicFlipCardHeight);
	max-height                 : var(--basicFlipCardHeight);

}

.flip-card-mouse-hover {
	position          : absolute !important;
	top               : calc(2% * 1.25);
	right             : calc(2% * 1.25);
	width             : 10%;
	height            : 10%;
	opacity           : 0.5 !important;
	background-size   : 100% 100%;
	background-repeat : no-repeat;
	z-index           : 2000000;
}

.flip-card-mouse-hover-counter-clockwise {
	background-color: #f0dea9;
	display: none;
}

.flip-card-mouse-hover-clockwise {
 	background-color: #ffb307;
	display: none;
}