style.css

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	display: flex;
	position: flex;
}

.memory_game {
	background: #c20232;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	perspective: 1000px;
	padding: 20px;
}

.memory_card {
	margin: 1px;
	width: 100%;
	height: 100%;
	width: calc(25% - 2px);
	height: calc(33.333% - 5px);
	position: relative;
	transform: scale(1);
	transform-style: preserve-3d;
	transition: transform .5s;
}

.memory_card:active {
	transform: scale(.95);
	transition: .3s;
} 

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

.back_card, .front_card {
	background: #f9e4b7;
	border: 2px solid #551382;
	border-radius: 15px;
	/*padding: 20px;*/
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.front_card {
	transform: rotateY(180deg);
}

img {
	width: 100px;
}