.project-filter .et_pb_ajax_pagination_container {
    display: flex;
    gap: 2%;
    flex-wrap:wrap;
}

.project-filter article {
    width: 32%;
    border-radius: var(--border-radius);
    background-color: var(--color-black);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap:20px;
}

.project-filter p a:hover::before {
    display: none;
} 

.project-filter article{
    /* transition: rotate 0.5s;*/
    rotate: 0deg;

    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    -o-transition: -o-transform 0.4s;
    transition: transform 0.4;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    
    transform: scaleX(-1);
}

.project-filter article:hover{
    /* transition: ease 0.5s; */
    rotate: 180deg;
    /* -webkit-transform: rotate( 180deg);
    -moz-transform: rotateX( 180deg);
    -o-transform: rotateX( 180deg);
    transform: rotateX( 180deg); */
    /* rotate: 180deg; */
    -webkit-transform: rotate( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);

    -webkit-backface-visibility: unset;
    -moz-backface-visibility: unset;
    -o-backface-visibility: unset;
    backface-visibility: unset;
    
    transform: scaleX(1);
}

.project-filter article h2,
.project-filter article h3,
.project-filter article .post-meta,
.project-filter article .post-content {
    transform: rotate(180deg);
}

.project-filter article h2,
.project-filter article h3 {
    color: var(--color-white);
    font-family: var(--font-family-bold);
    font-size: var(--font-size-intro);
    line-height: 1em;
    padding: 0px 40px;
    padding-top: 40px;
    order: 4;
}

.project-filter article .post-meta {
    padding: 10px 40px;
    order: 3;
}

.project-filter article .post-content {
    padding: 0px 40px;
    order: 2;
}

.project-filter article .post-meta a {
    color: var(--color-white) !important;
    font-family: var(--font-family-medium);
    font-size: var(--font-size-footer);
    border: 1px solid;
    border-radius: var(--border-radius);
    padding: 2px 10px !important;
    white-space: nowrap;
}

.project-filter .post-content a {
    font-family: var(--font-family-medium);
    font-size: var(--font-size-copy);
    border: 2px solid;
    border-radius: var(--border-radius);
    padding: 10px 20px 10px 20px !important;
    color: var(--color-off-white);
    width: fit-content;
}

.project-filter .post-content a::after {
    content: "";
    background-image: url(/wp-content/uploads/2023/09/aceArt_Ace_Red-Heart.svg);
    background-repeat: no-repeat;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left:10px;
}

@media (pointer:coarse) {
    .project-filter article{
        transform: scaleX(1);
        rotate: 180deg;
    }
    .project-filter article.et_pb_post .entry-featured-image-url img{
        rotate: 180deg;
    }

}

@media(max-width:980px){
    .project-filter .et_pb_ajax_pagination_container {
        display: flex;
        gap: 1%;
        flex-wrap: wrap;
    }
    
    .project-filter article {
        width: 48%;
        border-radius: var(--border-radius);
        background-color: var(--color-black);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap:20px;
    }

    .project-filter .et_pb_ajax_pagination_container {
        display: flex;
        gap: 1%;
        row-gap:10px;
        flex-wrap: wrap;
    }
    
    .project-filter article {
        width: 48%;
    }
}

@media(max-width:767px){
   
    .project-filter article {
        width: 100%;
    }
}