.galaxy {
  display: block;
  position: relative;
}
.galaxy img {
  display: block;
  max-width: 100%;
  transition: 0.15s;
}
.galaxy-r {
  position: relative;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  list-style: none;
}
.galaxy-r > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20vw;
  height: 20vw;
  margin: -10vw;
}
.galaxy-r > *:nth-of-type(1) {
  transform: rotate(0deg) translate(30vw) rotate(0deg);
}
.galaxy-r > *:nth-of-type(2) {
  transform: rotate(40deg) translate(30vw) rotate(-40deg);
}
.galaxy-r > *:nth-of-type(3) {
  transform: rotate(80deg) translate(30vw) rotate(-80deg);
}
.galaxy-r > *:nth-of-type(4) {
  transform: rotate(120deg) translate(30vw) rotate(-120deg);
}
.galaxy-r > *:nth-of-type(5) {
  transform: rotate(160deg) translate(30vw) rotate(-160deg);
}
.galaxy-r > *:nth-of-type(6) {
  transform: rotate(200deg) translate(30vw) rotate(-200deg);
}
.galaxy-r > *:nth-of-type(7) {
  transform: rotate(240deg) translate(30vw) rotate(-240deg);
}
.galaxy-r > *:nth-of-type(8) {
  transform: rotate(280deg) translate(30vw) rotate(-280deg);
}
.galaxy-r > *:nth-of-type(9) {
  transform: rotate(320deg) translate(30vw) rotate(-320deg);
}

.galaxy-forms {
  position: relative;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  list-style: none;
}
.galaxy-forms > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20vw;
  height: 20vw;
  margin: -10vw;
}
.galaxy-forms > *:nth-of-type(1) {
  transform: rotate(0deg) translate(27.5vw) rotate(0deg);
}
.galaxy-forms > *:nth-of-type(2) {
  transform: rotate(120deg) translate(27.5vw) rotate(-120deg);
}
.galaxy-forms > *:nth-of-type(3) {
  transform: rotate(240deg) translate(27.5vw) rotate(-240deg);
}

@media (min-width: 768px) {
  .galaxy-r {
    position: relative;
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
    list-style: none;
  }
  .galaxy-r > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7vw;
    height: 7vw;
    margin: -3.5vw;
  }
  .galaxy-r > *:nth-of-type(1) {
    transform: rotate(0deg) translate(12.5vw) rotate(0deg);
  }
  .galaxy-r > *:nth-of-type(2) {
    transform: rotate(40deg) translate(12.5vw) rotate(-40deg);
  }
  .galaxy-r > *:nth-of-type(3) {
    transform: rotate(80deg) translate(12.5vw) rotate(-80deg);
  }
  .galaxy-r > *:nth-of-type(4) {
    transform: rotate(120deg) translate(12.5vw) rotate(-120deg);
  }
  .galaxy-r > *:nth-of-type(5) {
    transform: rotate(160deg) translate(12.5vw) rotate(-160deg);
  }
  .galaxy-r > *:nth-of-type(6) {
    transform: rotate(200deg) translate(12.5vw) rotate(-200deg);
  }
  .galaxy-r > *:nth-of-type(7) {
    transform: rotate(240deg) translate(12.5vw) rotate(-240deg);
  }
  .galaxy-r > *:nth-of-type(8) {
    transform: rotate(280deg) translate(12.5vw) rotate(-280deg);
  }
  .galaxy-r > *:nth-of-type(9) {
    transform: rotate(320deg) translate(12.5vw) rotate(-320deg);
  }
  .galaxy-forms {
    position: relative;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    list-style: none;
  }
  .galaxy-forms > * {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6vw;
    height: 6vw;
    margin: -3vw;
  }
  .galaxy-forms > *:nth-of-type(1) {
    transform: rotate(0deg) translate(10vw) rotate(0deg);
  }
  .galaxy-forms > *:nth-of-type(2) {
    transform: rotate(120deg) translate(10vw) rotate(-120deg);
  }
  .galaxy-forms > *:nth-of-type(3) {
    transform: rotate(240deg) translate(10vw) rotate(-240deg);
  }
}