Flip card - CSS

.swiper-wrapper{
	display: flex;
}

.card {
    display: grid;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.card .front, .card .back {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.card .back {
    transform: rotateY(180deg);
}

.hide {
    display: none;
}

.flip {
    transform: rotateY(180deg);
}