.container {
    height: max-content;
    width: 100%;
    display: flex;
    justify-content: space-evenly;;
    flex-wrap: wrap;
}

.cardcontainer {
    width: 290px;
    height: 389px;
    margin-top: 40px;
    box-shadow: 0 0 3px rgba(50, 50, 0, 0.5);
    border-radius: 16px;
}

.card {
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease-in-out;
    transform-style: preserve-3d;
    border-radius: 16px;
}

.cardcontainer:hover .card {
    
    transform: rotateY(180deg);
}

.card figure {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 16px;
}

.card .front {
    transform: translateZ(1px);
    font-family: sans-serif;
    color: rgb(0, 0, 0);
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.432);
    text-align: center;
    background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(233, 233, 233));
}

.card .back {
    background-image: linear-gradient(to bottom right, rgb(0, 0, 0), rgb(35, 37, 37));
    transform: rotateY(180deg);
    text-align: center;
}