.flip-container {
    perspective: 800px; /* This creates a 3D space for child elements */
}

    .flip-container:hover > .flip-card {
        cursor: pointer;
        transform: rotateY(180deg);
    }

.flip-card {
    height: 100%;
    width: 100%;
    position: relative;
    transition: transform 1500ms;
    transform-style: preserve-3d;
}

.flip-front,
.flip-back {
    height: 100%;
    width: 100%;
    border-radius: 2rem;
    box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
    position: absolute;
    backface-visibility: hidden;
}

.flip-front {
    background-color: white;
    padding: 0px 15px 0px 15px;
}

.flip-back {
    background-color: #F5F5F5;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding: 0px 15px 0px 15px;
}