#grid {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  width: calc(2.5rem * 15 + 0.6rem);
  height: calc(2.5rem * 15 + 0.6rem);
  border: 0.3rem solid #fff;
}
#grid > div {
  width: 2.5rem;
  height: 2.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#grid .alien {
  background-image: url("../img/alien.webp");
}
#grid .spaceship {
  background-image: url("../img/spaceship.webp");
}
#grid .laser {
  background-image: url("../img/laser.webp");
}
#grid .boom {
  background-image: url("../img/boom.webp");
}

@media only screen and (max-width: 1080px) {
  #grid {
    width: calc(2.5rem / 1.7 * 15 + 0.6rem);
    height: calc(2.5rem / 1.7 * 15 + 0.6rem);
  }
  #grid > div {
    width: calc(2.5rem / 1.7);
    height: calc(2.5rem / 1.7);
  }
}/*# sourceMappingURL=space-invaders-style.css.map */