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

body{
  height: 100vh;
  background: #2c87ae;
}

main{
  display: flex;
}

.memory-game{
  width: 1100px;
  height: 1100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  perspective: 1000px;
  margin: 100px auto;
}

.memory-card{
  width: calc(16% - 10px);
  height: 24%;
  background: #51b9e5;
  position: relative;
  border: 4px solid #51b9e5;
  border-radius: 5px;
  margin: 5px;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
}

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

.memory-card:active {
  transform: scale(.97);
  transition: transform .2s;
}

.front-face, .back-face{
  width:100%;
  height:100%;
  padding: 20px;
  position: absolute;
  backface-visibility: hidden;
}

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

img{
  max-width: 100%;
}