.gear-animation {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  display: block;
}

#gear-main {
  animation: rotateCW 4s linear infinite;
  transform-origin: 100px 100px;
}

#gear-small {
  animation: rotateCCW 4s linear infinite;
  transform-origin: 140px 100px;
}

@keyframes rotateCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateCCW {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@media (max-width: 768px) {
  .gear-animation {
    width: 200px;
    height: 200px;
  }
}