*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 15px;
}

.game__container {
  margin-top: 50px;
  width: 940px;
  height: 640px;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.game__card {
  cursor: pointer;
  position: relative;
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  border-radius: 7px;
  transform-style: preserve-3d;
  transition: 0.6s;
}

.game__card.flip {
  transform: rotateY(180deg);
  pointer-events: none;
}

.front__img,
.back__img {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 5px;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.front__img {
  z-index: 2;
  transform: rotateY(0deg);
}

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

@media (max-width: 1024px) {
  .game__container {
    width: 740px;
    height: 540px;
  }
}

@media (max-width: 768px) {
  .game__container {
    width: 540px;
    height: 440px;
  }
}

@media (max-width: 576px) {
  .game__card {
    width: calc(49% - 10px);
    height: calc(33.333% - 10px);
  }
  .game__container {
    width: 240px;
    height: 240px;
  }
}