#grid {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  width: calc(9rem * 4);
  height: calc(9rem * 3);
}
#grid .card {
  width: 9rem;
  height: 9rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../img/back.webp");
  cursor: pointer;
}
#grid .alien {
  background-image: url(../img/alien.webp);
}
#grid .bug {
  background-image: url(../img/bug.webp);
}
#grid .duck {
  background-image: url(../img/duck.webp);
}
#grid .rocket {
  background-image: url(../img/rocket.webp);
}
#grid .spaceship {
  background-image: url(../img/spaceship.webp);
}
#grid .tiktac {
  background-image: url(../img/tiktac.webp);
}

@media only screen and (max-width: 1080px) {
  #grid {
    width: calc(9rem / 1.618 * 4);
    height: calc(9rem / 1.618 * 3);
  }
  #grid .card {
    width: calc(9rem / 1.618);
    height: calc(9rem / 1.618);
  }
}/*# sourceMappingURL=memory-style.css.map */