body {
    background-image: url('./images/si-backgound.JPG');
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

.cards {
    width: 1292px;
    height: 550px;
}

.card {
    transform: scale(1);
    transform-style: preserve-3d;;
    background: black;
    border-radius: 5px;
    width: 315px;
    height: 183px;
    background-size: cover;
    border: 2px solid black;
    box-shadow: 4px 2px 5px black;
    cursor: pointer;
    margin-top: 6px;
    margin-right: 8px;
    transition: all .35s linear;
}

.front-face {
    padding-top: 49px;
    padding-right: 33px;
}

.card:active {
    transform: scale(0.97);
    transition: transform 0.2s;
}

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

.front-face,
.back-face {
    position: absolute;
    max-width: 100%;
    padding: 0 87px 75px 61px;
    backface-visibility: hidden;
    border-radius: 42%;
}

.front-face {
    transform: rotateY(180deg);
}