.wp-block-themeisle-blocks-flip {
	--width: 100%;
	--height: 300px;
	--padding: 35px 55px;

	--border-width: 1px;
	--border-color: currentColor;
	--border-radius: 10px;
	--front-background: transparent;
	--back-background: transparent;
	--box-shadow: none;
	--front-vertical-align: center;
	--front-horizontal-align: center;
	--back-vertical-align: center;
	--front-media-width: 150px;
	--front-media-height: 150px;

	--flip-anim: unset;

	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	height: var( --height );
	perspective: 1000px; /* Remove this if you don't want the 3D effect */

	&.has-dark-front-bg .o-flip-front {
		color: var( --nv-text-dark-bg , #fff );
	}

	&.has-light-front-bg .o-flip-front {
		color: var( --nv-text-color , #000 );
	}

	&.has-dark-back-bg .o-flip-back {
		color: var( --nv-text-dark-bg , #fff );
	}

	&.has-light-back-bg .o-flip-back {
		color: var( --nv-text-color , #000 );
	}

	// &[class^="block-editor"] {
	// 	width: auto;
	// }

	&.flipX {
		--flip-anim: rotateX(180deg);
	}

	&.flipX-rev {
		--flip-anim: rotateX(-180deg);
	}

	&.flipY {
		--flip-anim: rotateY(180deg);
	}

	&.flipY-rev {
		--flip-anim: rotateY(-180deg);
	}

	&:hover {
		&.anim {
			 > .o-flip-inner {
				transform: var( --flip-anim );
			}
		}
	}

	.o-flip-inner {
		position: relative;
		width: var(--width);
		height: 100%;
		text-align: center;
		transition: transform 0.8s;
		transform-style: preserve-3d;
		background-size: cover;
	}

	.o-flip-front, .o-flip-back {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden; /* Safari */
		backface-visibility: hidden;
		overflow-x: hidden;
		overflow-y: auto;
		background-size: inherit;
		border-width: var(--border-width);
		border-color: var(--border-color);
		border-style: solid;
		border-radius: var( --border-radius );
		box-sizing: border-box;
	}

	.o-flip-front {
		background: var( --front-background );
		transform: rotate(0deg);

		&:hover {
			box-shadow: var( --box-shadow );
		}
	}

	.o-flip-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		justify-content: var( --front-vertical-align );
		align-items: var( --front-horizontal-align );

		padding: var( --padding );

		h3, p {
			margin: 0.5rem;
		}

		.o-img {
			width: var( --front-media-width );
			height: var( --front-media-height );
		}
	}

	.o-flip-back {
		background: var( --back-background );
		padding: var( --padding );
		box-shadow: var( --box-shadow );
		transform: var( --flip-anim );
		justify-content: var( --back-vertical-align );
	}

	.invert {
		.o-flip-front {
			transform: var( --flip-anim );
			box-shadow: var( --box-shadow );
		}

		.o-flip-back {
			transform: rotate(0deg);
			box-shadow: unset;
			&:hover {
				box-shadow: var( --box-shadow );
			}
		}
	}
}
