.cardList {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.card,
.inner,
.card .face,
.card .back {
    width: 285px;
    height: 400px;
    border-radius: 6px;
}

.card {
    margin: 5px;
    display: inline-block;
    perspective: 800px;
    -webkit-perspective: 800px;
}

.inner {
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.card .face,
.card .back {
    vertical-align: middle;
    text-align: center;
    background: #fff;
}

.card .face {
    box-sizing: border-box;
    display: none;
    border: 1px solid #ccc;
}

.card .back {
    display: table-cell;
    border: 5px solid #fff;
    background-color: #8b1f2d;
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.card.reverse .face {
    display: table-cell;
}

.card.reverse .back {
    display: none;
}