:root {
    --background-color: white;
    --main-color: rgb(234,155,75);
}

html {
    width: 100%;
    height: 100%;
}

body {
    background-color: black;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
}

.wrapper {
    padding-left: 7.35%;
}

.card {
    display: inline-block;
    margin-right: 20px;
    padding-bottom: 20px;
    width: 200px;
    height: 350px;
    perspective: 360px;
}

.card-inner {
    display: flex;
    text-align: center;
    transition: transform 0.6s;
    width: 200px;
    height: 350px;
    transform-style: preserve-3d;
}

.card.flipped .card-inner {
    transform: rotateX(180deg);
    width: 202px;
    height: 352px;
}

/*
.card-front {
    background: navy;
}
*/

.card-front,
.card-back {
    position: absolute;
    width: 200px;
    height: 350px;
    border: 1px solid black;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
    transform: rotateX(180deg);
}