@import "../../pdh_variables";

.anim-flip {
    display: inline-block;
    position: relative;
    & > :first-child,
    & > :nth-child(2) {
        display: block;
        transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
        transition-duration: 0.5s;
        transition-property: transform, opacity;
    }
    & > :first-child {
        transform: rotateY(0deg);
        .card-header {
            overflow: hidden;
            height: 5.45rem;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            text-overflow: ellipsis;
            display: -webkit-box;
        }
    }
    & > :nth-child(2) {
        position: absolute;
        opacity: 0;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        transform: rotateY(-180deg);
    }
    &:hover {
        > :first-child {
            transform: rotateY(180deg);
        }
        > :nth-child(2) {
            opacity: 1;
            transform: rotateY(0deg);
        }
    }
    &.anim-flip-vertical {
        > :nth-child(2) {
            transform: rotateX(-180deg);
        }
        &:hover {
            > :first-child {
                transform: rotateX(180deg);
            }
            > :nth-child(2) {
                transform: rotateX(0deg);
            }
        }
    }
}
.anim-flip .card img {
    width: 100%;
    aspect-ratio: 2/3;
    object-fit: cover;
}

.flip-fade {
    background: linear-gradient(to top, $primary 75%, rgba(0, 0, 0, 0) 100%);
}