body {
    /* flip card */
    .card-flip > div

{
    backface-visibility: hidden;
    transition: transform 300ms linear;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
}

.card-front {
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
}

.card-flip:hover .card-front {
    transform: rotateY(-180deg);
}

.card-flip:hover .card-back {
    transform: rotateY(0deg);
}

}