.gears {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 100px;
}

.gear {
  margin: 20px;
  width: 200px;
  height: 200px;
}

.circle,
.hole,
.tooth {
  border-radius: 50%;
}

.circle {
  width: 100%;
  height: 100%;
  background-color: gray;
}

.hole,
.tooth {
  background-color: #fff;
}

.hole {
  width: 80px;
  height: 80px;
}

.tooth {
  width: 60px;
  height: 60px;
}

/* Position */
.gear-position {
  position: relative;
}

.gear-position .hole {
  position: absolute;
  top: 60px;
  left: 60px;
}

.gear-position .tooth {
  position: absolute;
}
.gear-position .t1 {
  top: -30px;
  left: 70px;
}
.gear-position .t2 {
  top: 70px;
  right: -30px;
}
.gear-position .t3 {
  bottom: -30px;
  right: 70px;
}
.gear-position .t4 {
  top: 70px;
  left: -30px;
}
.gear-position .t5 {
  top: 0;
  left: 0;
}
.gear-position .t6 {
  top: 0;
  right: 0;
}
.gear-position .t7 {
  bottom: 0;
  right: 0;
}
.gear-position .t8 {
  bottom: 0;
  left: 0;
}

/* Transform */
.gear-transform {
  position: relative;
}

.gear-transform .hole,
.gear-transform .tooth {
  position: absolute;
  top: 0;
  left: 0;
}

.gear-transform .hole {
  transform: translate(100px, 100px) translate(-50%, -50%);
}

.gear-transform .t1 {
  transform: translate(100px) translate(-50%, -50%);
}
.gear-transform .t2 {
  transform: translate(200px, 0) translate(-100%);
}
.gear-transform .t3 {
  transform: translate(200px, 100px) translate(-50%, -50%);
}
.gear-transform .t4 {
  transform: translate(200px, 200px) translate(-100%, -100%);
}
.gear-transform .t5 {
  transform: translate(100px, 200px) translate(-50%, -50%);
}
.gear-transform .t6 {
  transform: translate(0, 200px) translate(0, -100%);
}
.gear-transform .t7 {
  transform: translate(0, 100px) translate(-50%, -50%);
}
.gear-transform .t8 {
  transform: translate(0);
}