.chess-board-card-container {
  width: 100px;
  height: 121px;
  margin-right: 3px;
  cursor: pointer;
  position: relative;
  perspective: 800px;

  .card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
  }

  .card.flipped {
    transform: rotateY(180deg);
  }

  .card img {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
  }

  .card .back {
    background: blue;
    transform: rotateY(0deg);
  }

  .card .front {
    background: blue;
    transform: rotateY(180deg);
  }
}

@media screen and (max-width: 450px) {
  .chess-board-card-container {
    width: 92px;
    height: 111px;
    margin-right: 1px;
  }
}

@media screen and (max-width: 395px) {
  .chess-board-card-container {
    width: 85px;
    height: 102px;
    margin-right: 1px;
  }
}

@media screen and (max-width: 360px) {
  .chess-board-card-container {
    width: 70px;
    height: 84px;
    margin-right: 1px;
  }
}
