style.css

.app{
    width: 100%;
}

.game-body{
    width: 800px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
}

.m-card{
    width: 140px;
    height: 160px;
    padding: 10px;
    perspective: 1000px;
}

.m-card.hover .m-card-body {
    transform: rotateY(180deg);
}

.m-card-body{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 120px;
    height: 140px;
    padding: 10px;
    border: 2px solid #4bafc6;
    border-radius: 6px;
    box-shadow: inset 0 0px 0px 2px rgb(255 255 255), 0 1px 6px 1px rgba(75, 75, 75, .05);
	transition: 0.6s;
	transform-style: preserve-3d;
}

.m-card-back, .m-card-front{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-card-front{
    z-index: 2;
	transform: rotateY(180deg);
}

.m-card-back{
    background: url(./images/morocco-blue.png) 0 0 repeat;
	transform: rotateY(0deg);
}

.m-card img{
    width: 80%;
}