@charset "utf-8";
/*--------------------------------------------------
*
* 	Game
*
*--------------------------------------------------*/
#game-container {
    position: relative;
    width:100%;
    height:100%;
}

#game-card-conteiner ul {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
}

#game-card-conteiner li {
    width: 33.3333333333%;
    padding: 5px;
    margin: 0 auto;
    text-align: center;
}

.game-card-item {
  display: inline-block;
  margin: 10px;
  list-style: none;
}

.game-card {
  display: inline-block;
  width: 24vw;
  height: 37vw;
  max-width: 100px;
  max-height: 153px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
  border-radius: 10px;
}

.game-card-surface {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: auto;
  box-shadow: 2px 4px 4px #ccc;
  border-radius: 10px;
  transition:
    transform 0.6s;
   backface-visibility: hidden;
}

.game-card-surface img {
  width: 100%;
}

.game-card-surface.game-card-front {
  transform: none;
}

.game-card-flipped .game-card-surface.game-card-front  {
  transform: rotateY(180deg);
}

.game-card-surface.game-card-back {
  transform: rotateY(180deg);
  color: #262626;
}

.game-card-flipped .game-card-surface.game-card-back {
  transform: rotateY(360deg);
}