.game-field {
  --field-size: 650px;
  display: none;
  width: clamp(250px, 80vw, var(--field-size));
  height: clamp(250px, 80vw, var(--field-size));
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: min(1vw, 5px);
}

.card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.card:active {
  transform: scale(0.97);
}

.card .front,
.card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 1px 1px 1px 2px var(--CARD-SHADOW-COLOR);
  backface-visibility: hidden;
  transition: transform 1s;
}

.card .front {
  background-color: var(--CARD-FRONT-COLOR);
  background-image: url("../assets/img/memory/memory-icon.png");
}

.card .back {
  background-color: var(--CARD-BACK-COLOR);
  transform: rotateY(180deg);
}

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

.card.flip .back {
  transform: rotateY(0);
}

@media screen and (max-height: 700px) and (min-aspect-ratio: 7/4) {
  .game-field {
    --field-size: 450px;
    width: clamp(250px, 80vh, var(--field-size));
    height: clamp(250px, 80vh, var(--field-size));
  }
}