.memory-game {
    width: 40%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding-bottom: 50px;
}

.card {
    aspect-ratio: 3 / 4; 
    height: 17vh;
    position: relative;
    perspective: 800px;
    cursor: pointer;
}

.card-inner {
    position: absolute;
    inset: 0;
    transition: transform 0.4s;
    transform-style: preserve-3d;
}

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

.card-front, .card-back {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    backface-visibility: hidden;
}

.card-front {
    transform: rotateY(180deg);
    background-size: cover;
    background-position: center;
}

.card-back {
    background-image: url('./../asset/images/card-back.png');
    background-size: cover;
    background-position: center;
    
}