.projects-teaser-section .et_pb_button_module_wrapper {
	width: fit-content;
	margin-inline: auto;
}

.projects-teaser-container {
	width: 90%;
	max-width: 1780px;
	margin: auto;
}

.projects-teaser-container .projects-slider .project-slide {
	background-color: transparent;
	perspective: 3000px;
	/* margin: 30px; */
	margin-block: 30px;
	aspect-ratio: 570 / 760;
}

.projects-teaser-container .projects-slider .project-slide .flip-card {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.projects-teaser-container .projects-slider .project-slide:hover .flip-card {
	transform: rotateX(180deg);
}

.projects-teaser-container .projects-slider .project-slide .flip-card :is(.flip-front, .flip-back) {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	background-color: var(--color-black);
	display: flex;
	flex-direction: column;
	border-radius: var(--border-radius);
	overflow: hidden;
}

/* #region General Styles for both sides */
.projects-teaser-container .projects-slider .project-slide .flip-card .image-container {
	line-height: 0;
	height: 50%;
}

.projects-teaser-container .projects-slider .project-slide .flip-card .image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.projects-teaser-container .projects-slider .project-slide .flip-card .content-container {
	padding: 45px;
	height: 50%;

	display: flex;
	flex-direction: column;
	gap: 20px;
	justify-content: space-between;
	text-align: left;
}

#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.project-title {
	color: var(--color-white);
	font-size: var(--font-size-intro);
	font-family: var(--font-family-bold);
}

.projects-teaser-container .projects-slider .project-slide .flip-card .content-container .categories-container {
	margin-bottom: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	line-height: 1;
}

.projects-teaser-container .projects-slider .project-slide .flip-card .content-container .categories-container a {
	color: var(--color-white) !important;
	border: 1px solid var(--color-white);
	padding: 5px 10px;
	border-radius: 50px;
	transition: 0.3s;
	font-family: var(--font-family-medium);
	font-size: initial;
}

.projects-teaser-container .projects-slider .project-slide .flip-card .content-container .categories-container a:hover {
	color: var(--color-black) !important;
	background-color: var(--color-white);
}

#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.btn {
	color: var(--color-white);
	border: 2px solid var(--color-white);
	padding: 8px 15px 8px 20px;
	border-radius: 50px;
	font-family: var(--font-family-medium);
	font-size: var(--font-button);
	width: fit-content;
	line-height: 1;
}

#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.btn::after {
	content: url('/wp-content/uploads/2023/09/aceArt_Ace_Red-Heart.svg');
	transform: scaleX(-1);
	width: 15px;
	aspect-ratio: 38 / 40;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
	transition: 0.3s;
}

#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.btn:hover {
	border-color: var(--color-red);
	background: var(--color-red);
	color: var(--color-black);
}

#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.btn:hover::after {
	transform: scaleX(1);
	filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(324deg) brightness(96%) contrast(104%);
}

/* #endregion General Styles for both sides */

.projects-teaser-container .projects-slider .project-slide .flip-card .flip-front .content-container {
	transform: rotateZ(180deg);
}

.projects-teaser-container .projects-slider .project-slide .flip-card .flip-back {
	transform: rotateX(180deg);
	flex-direction: column-reverse;
}

.projects-teaser-container .projects-slider .project-slide .flip-card .flip-back .image-container {
	transform: rotateZ(180deg);
}

@media only screen and (max-width: 980px) {
	.projects-teaser-container .projects-slider .project-slide .flip-card .content-container {
		padding: 25px;
		gap: 15px;
	}

	#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.project-title {
		font-size: var(--font-size-head);
	}

	#page-container .projects-teaser-container .projects-slider .project-slide .flip-card .content-container a.btn {
		padding: 7px 20px;
	}
}

@media only screen and (max-width: 767px) {
	.projects-teaser-container {
		width: 80%;
	}


	.projects-teaser-container .projects-slider .project-slide .flip-card .content-container .categories-container a {
		padding: 4px 8px;
		font-size: 12px;
	}
}

@media (pointer:coarse) {
	.projects-teaser-container .projects-slider .project-slide .flip-card {
		transform: rotateX(180deg);
	}

	.projects-teaser-container .projects-slider .project-slide .flip-card .flip-back .image-container {
		transform: rotateZ(0deg);
	}
}




/* #region slider arrows */

.projects-teaser-container .swiper-button {
	display: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 30px;
	aspect-ratio: 38 / 40;
	line-height: 1;
	cursor: pointer;
	transition: 0.2s;
	user-select: none;
	-webkit-user-select: none;
	background-repeat: no-repeat;
	background-image: url(/wp-content/themes/aceart/assets/black_heart_outline.svg);
	z-index: 10;
}

.projects-teaser-container .swiper-button:hover {
	background-image: url(/wp-content/uploads/2023/09/aceArt_Ace_Black-Heart.svg);
}

.projects-teaser-container .swiper-button.active {
	display: block;
}

.projects-teaser-container .swiper-button:active {
	scale: 0.95;
}

.projects-teaser-container .swiper-button.prev {
	left: 20px;
	rotate: 180deg;
	transform-origin: top;
}

.projects-teaser-container .swiper-button.next {
	right: 20px;
}

@media only screen and (max-width: 1400px) {
	.projects-teaser-container .swiper-button.prev {
		left: 0;
	}

	.projects-teaser-container .swiper-button.next {
		right: 0;
	}
}

@media only screen and (max-width: 980px) {
	.projects-teaser-container .swiper-button {
		transform: translate(-30%, -50%);
		height: 25px;
	}
}

/* #endregion slider arrows */