.card{
    cursor: pointer;
    position: relative;
}
.front,
.back{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s ease-out;
    /* border-radius: 16px; */
}
.front{
    transform: perspective(1900px) rotateY(0deg);
}
.back{
    transform: perspective(1900px) rotateY(-180deg);
}

@media only screen and ( min-width: 900px ){
    .card:hover > .front{
        transform: perspective(1900px) rotateY(180deg);
    }
    .card:hover > .back{
        transform: perspective(1900px) rotateY(0deg);
    }
}

.front_active{
    transform: perspective(1900px) rotateY(180deg);
}
.back_active{
    transform: perspective(1900px) rotateY(0deg);
}