.card-wrap {
    transition-timing-function: cubic-bezier(0.43, 0.38, 0, 1);
    cursor: pointer;
    transition: 0.3s;
    perspective: 400px;
}

.card-wrap:hover {
    transform: scale(1.05) !important;
}

.card-wrap .card {
    transition-timing-function: cubic-bezier(0.43, 0.38, 0, 1);
    transition: 0.3s;
    position: relative;
    aspect-ratio: 7/12;
    width: 290px; /* Adjust the width of the cards */
    height: auto; /* Adjust the height of the cards */
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    transform-style: preserve-3d;

}

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

.card-wrap .card > div {
    border-radius: 18px;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    background-size: contain;
}

.card-wrap .card .inner {
    transform: rotateY(180deg);
    background-color: #90809f;
    opacity: 1;
}
.card-wrap .card .inner.turned {
    transform: rotateX(180deg);
}

.card-wrap .card .outer {
    background-color: #333;
    background-image: url("../img/1-card-reverse.png");
    transition: 0.3s;
    background-size: 126%;
    background-position: center;

}
.card-wrap .button_meaning{
    color: #6b6570;
    transform: rotateY(180deg);
    height: auto !important;
    border: 2px solid #6b6570;
    margin-top: 175%;
    border-radius: 5px;
    max-width: 90%;
    padding: 20px 1%;
    width: 96% !important;

}
.card-wrap .button_meaning p{
    margin: -20px;
    color: rgb(154, 148, 158);
    text-align: center;
    font-family: 'Marck Script', cursive;
    font-size: calc(1.3rem - 0.2vw);
    font-weight: 700;
    transform: rotateY(180deg);
}
.button-container {
    display: flex;
    justify-content: center;
    transform: rotateY(180deg);
    cursor: url("../img/pointer-new.png"), auto;
}

@media (max-width: 768px) {

    .card-spot {
        max-width: 33%;
    }

    .card-wrap .card {
        width: 30vw;
    }

    .cards {
        gap: 1vw;
    }
}

/*# sourceMappingURL=card.css.map */