/* Link envolvendo o card */

a.flip-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}


/* container do flip */

.flip-card {
    perspective: 1000px;
    cursor: pointer;
}


/* aqui é o pulo do gato: GRID ao invés de absolute => altura automática */

.flip-inner {
    display: grid;
    transform-style: preserve-3d;
    transition: transform .6s;
}


/* faces sobrepostas no mesmo "slot" do grid */

.flip-face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}


/* verso vira */

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


/* hover só em dispositivos que têm hover (desktop) */

@media (hover: hover) {
    .flip-card:hover .flip-inner {
        transform: rotateY(180deg);
    }
}


/* classe para virar via JS (mobile / teclado) */

.flip-card.is-flipped .flip-inner {
    transform: rotateY(180deg);
}