.aceart-filterable-blog-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
	width: 100%;
}

.aceart-filterable-blog-wrapper article {
	width: 30%;
	display: flex;
	flex-direction: column;
}

/*
 * Button as Link
 */
.aceart-category-container .clickable {
	cursor: pointer;
	color: var(--color-black);
	text-decoration: none;
}

.aceart-category-container {
	margin-bottom: 57px;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	row-gap: 10px;
}

.aceart-category-container .blog-category {
	font-family: var(--font-family-medium);
	font-size: var(--font-size-copy);
	border: 2px solid;
	border-radius: var(--border-radius);
	padding: 7px 20px !important;
	margin-right: 10px;
	transition: ease 0.3s;
}

.aceart-category-container .blog-category.active {
	background-color: var(--color-red);
	color: var(--color-black);
	border: 2px solid var(--color-red);
}

.aceart-blog-pagination-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	padding: 20px 0;
	font-family: var(--font-family-medium);
	font-size: var(--font-size-copy);
}

.aceart-blog-pagination-wrapper .selection {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.aceart-blog-pagination-wrapper .selection span {
	padding: 10px;
	border-radius: 50px;
	border: 2px solid var(--color-black);
	transition: 0.3s ease-in-out;
}

.aceart-blog-pagination-wrapper .selection span.active {
	background-color: var(--color-black);
	color: var(--color-off-white);
}

.aceart-blog-pagination-wrapper .selection span:hover {
	background-color: var(--color-black);
	color: var(--color-off-white);
}

.aceart-blog-pagination-wrapper :is(.previous, .next) {
	line-height: 0;
}

.aceart-blog-pagination-wrapper :is(.previous, .next) > span {
	line-height: 0;
	height: 100%;
	display: inline-block;
}

.aceart-blog-pagination-wrapper :is(.previous, .next) img {
	height: 30px;
	border-radius: 0;
	object-fit: contain;
}

.aceart-blog-pagination-wrapper .previous img {
	rotate: 180deg;
}

.aceart-blog-pagination-wrapper :is(.previous, .next):not(.disabled) img:hover {
	content: url(/wp-content/themes/aceart/assets/aceArt_Ace_Black-Heart.svg);
}

.aceart-blog-pagination-wrapper:not(:has(.selection .clickable)) :is(.previous, .next) {
	display: none;
}

.aceart-blog-pagination-wrapper .clickable {
	cursor: pointer;
	color: var(--color-black);
	text-decoration: none;
}

.aceart-blog-pagination-wrapper .disabled {
	pointer-events: none;
	opacity: 0.5;
}

.aceart-category-container .clickable:hover {
	background-color: var(--color-red);
	color: var(--color-black);
	border: 2px solid var(--color-red);
}


@media (max-width: 768px) {
	.aceart-filterable-blog-wrapper {
		flex-direction: column;
	}

	.aceart-filterable-blog-wrapper article {
		width: 100% !important;
	}

	.aceart-blog-pagination-wrapper {
		gap: 20px;
	}

	.aceart-blog-pagination-wrapper .selection span {
		padding: 10px;
		font-size: 14px;
		aspect-ratio: 1;
		line-height: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.aceart-blog-pagination-wrapper :is(.previous, .next) img {
		height: 25px;
		object-fit: contain;
	}

	.aceart-category-container .blog-category {
		font-family: var(--font-family-medium);
		font-size: var(--font-size-footer);
		border: 2px solid;
		border-radius: var(--border-radius);
		padding: 0px 10px !important;
		margin-right: 10px;
		transition: ease 0.3s;
	}
}

/*aceArt Blog Style*/
.blog-module .et_pb_ajax_pagination_container {
	display: flex;
	flex-wrap: wrap;
	gap: 2%;
}

.blog-module article {
	width: 32%;
	border-radius: var(--border-radius);
	border: 2px solid var(--color-black);
	padding: 20px;
	padding-bottom: 30px;
	display: flex;
	flex-direction: column;
	margin-bottom: 2%;
}

.blog-module article h2 {
	font-size: var(--font-size-head-three);
	line-height: var(--line-height-head-three);
	font-family: var(--font-family-bold);
	color: var(--color-red);
}

.blog-module article.et_pb_post .post-meta {
	color: var(--color-black);
	font-size: var(--font-size-footer);
	line-height: var(--line-height-footer);
	font-family: var(--font-family-medium);
}

.blog-module article.et_pb_post .post-content p {
	color: var(--color-black);
	font-family: var(--font-family-regular);
	font-size: var(--font-size-copy);
}

.blog-module .date {
	font-family: var(--font-family-medium);
	font-size: var(--font-size-footer);
	line-height: var(--line-height-footer);
}

.blog-module .entry-featured-image-url {
	order: 1;
}

.blog-module img {
	border-radius: 20px;
	height: 250px;
	width: 100%;
	object-fit: cover;
}

.blog-module .post-meta {
	order: 2;
	margin-bottom: 0px;
}

.blog-module .entry-title {
	order: 3;
}

.blog-module .post-content {
	order: 4;
}

.blog-module .more-link {
	font-size: var(--font-size-copy);
	line-height: var(--line-height-copy);
	font-family: var(--font-family-bold);
}

.blog-module .post-content-inner {
	padding-bottom: 10px;
}


.blog-module article:hover {
	background-color: var(--color-black);
	color: var(--color-off-white);
	transition: ease 0.2s;
}

.blog-module article.et_pb_post:hover .post-content p,
.blog-module article.et_pb_post:hover p.post-meta {
	color: var(--color-off-white);
}

@media(max-width:980px) {
	.blog-module article {
		width: 49%;
		border-radius: var(--border-radius);
		border: 2px solid black;
		padding: 20px;
		padding-bottom: 30px;
		display: flex;
		flex-direction: column;
	}
}

@media(max-width:767px) {
	.blog-module article {
		width: 100%;
		border-radius: var(--border-radius);
		border: 2px solid black;
		padding: 20px;
		padding-bottom: 30px;
		display: flex;
		flex-direction: column;
	}

	.aceart-category-container {
		margin-bottom: 27px;
	}
}


/* #region projects - flip cards */

.filterable-projects .aceart-filterable-blog-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0 2%;
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	.filterable-projects .aceart-filterable-blog-wrapper {
		display: grid;
		grid-template-columns: 33% 33% 33%;
		gap: 0 2%;
	}
}

.filterable-projects .aceart-filterable-blog-wrapper article {
	width: unset;
	background-color: transparent;
	perspective: 3000px;
	/* margin: 30px; */
	margin-block: 30px;
	aspect-ratio: 570 / 730;
}

.filterable-projects article .flip-card {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

.filterable-projects article:hover .flip-card {
	transform: rotateX(180deg);
}

.filterable-projects article .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;
}

@media(max-width:767px) {
	.filterable-projects .aceart-filterable-blog-wrapper article {
		aspect-ratio: auto;
	}
}

@media(max-width:380px) {
	.filterable-projects .aceart-filterable-blog-wrapper article {
		aspect-ratio: auto;
	}
}


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

.filterable-projects article .flip-card .image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.filterable-projects article .flip-card .content-container {
	padding: 45px;
	height: 50%;

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

.filterable-projects article .flip-card .content-container a.project-title {
	color: var(--color-white);
	font-size: var(--font-size-intro);
	font-family: var(--font-family-bold);
}

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

.filterable-projects article .flip-card .content-container .categories-container :is(a, span) {
	display: inline-block;
	width: fit-content;
	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);
}

.filterable-projects article .flip-card .content-container .categories-container :is(a, span):hover {
	color: var(--color-black) !important;
	background-color: var(--color-white);
}

.filterable-projects article .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;
}

.filterable-projects article .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;
}

.filterable-projects article .flip-card .content-container a.btn:hover {
	border-color: var(--color-red);
	background: var(--color-red);
	color: var(--color-black);
}

.filterable-projects article .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 */

.filterable-projects article .flip-card .flip-front .content-container {
	transform: rotateZ(180deg);
}

.filterable-projects article .flip-card .flip-back {
	transform: rotateX(180deg);
	flex-direction: column-reverse;
}

.filterable-projects article .flip-card .flip-back .image-container {
	transform: rotateZ(180deg);
}

@media only screen and (max-width: 1300px) {
	.filterable-projects article .flip-card .content-container {
		padding: 30px;
	}

	.filterable-projects article .flip-card .content-container a.btn {
		padding: 6px 12px 6px 15px;
		font-size: 16px;
	}

	.filterable-projects article .flip-card .content-container .categories-container :is(a, span) {
		padding: 4px 8px;
		font-size: 12px;
	}
}

@media only screen and (max-width: 1100px) {
	.filterable-projects article .flip-card .content-container .categories-container {
		gap: 3px 8px;
	}

	.filterable-projects .aceart-filterable-blog-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.filterable-projects article .flip-card .content-container {
		padding: 25px;
		gap: 15px;
	}

	.filterable-projects article .flip-card .content-container a.project-title {
		font-size: var(--font-size-head);
		line-height: 1;
	}

	.filterable-projects article .flip-card .content-container a.btn {
		padding: 7px 20px;
	}


	@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
		.filterable-projects .aceart-filterable-blog-wrapper {
			grid-template-columns: 50% 50%;
		}
	}
}

@media only screen and (max-width: 767px) {
	.filterable-projects .aceart-filterable-blog-wrapper {
		display: grid;
		grid-template-columns: 1fr;
	}

	@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
		.filterable-projects .aceart-filterable-blog-wrapper {
			grid-template-columns: 100%;
		}
	}
}

@media (pointer:coarse) {
	.filterable-projects article .flip-card {
		transform: rotateX(180deg);
	}

	.filterable-projects article .flip-card .flip-back .image-container {
		transform: rotateZ(0deg);
	}
}

/* #endregion projects - flip cards */