#game {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 25vh);
  /* margin: 0 4vw 5vw 4vw; */
}
.game-header {
  background-color: #000;
  border: 1px solid #fff;
  grid-column: span 4;
  grid-row: span 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-item {
  width: 100%;
  height: 100%;
  background-color: #000;
  border: 1px solid #fff;
  position: relative;
  /* perspective: 600px; */
}
.game-item:hover .front {
  /* background-color: #fff;
  color: #000; */
  box-shadow: inset 0 0 20px white;
}
.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}
.card.is-flipped {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  width: 100%;
  height: 100%;
  background: url(../../assets/img/cross.png);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
}
.card .back {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
}
.card .back img {
  max-height:100%;
  width: auto;
}
.game-header .title-2 {
  margin: 0;
}
.matched {
  text-shadow: 0 0 10px white;
}
.blink-once {
  animation: blink 5s linear 1 forwards;
}
.blink {
  animation: blink 3s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}