.perspective {
        perspective: 1000px;
    }

    .flip-card-inner {
        transform-style: preserve-3d;
        position: relative;
        height: 100%;
        transition: transform 0.6s;
    }

    .flip-card-front, .flip-card-back {
        backface-visibility: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 0.5rem;
    }

    .flip-card-back {
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

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