.card-wrapper {
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 0.5rem;
}

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

.card-wrapper.flipped .card {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
}

.card-front {
    background-color: #E2A3C7;
    color: white;
}

.card-back {
    background-color: #A8DCD9;
    color: white;
    transform: rotateY(180deg);
}

.card-back>img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.card-front>img{
    height: 70%;
    width: 70%;
    object-fit: contain;
}