.targets-wrapper {
    display: flex;
}

.transform-target {
  width: 150px;
  height: 150px;
  margin: 40px auto;
}

.transform-target .circle {
  border-radius: 50%;
}

.transform-target .circle.outer {
  width: 90px;
  height: 90px;
  border: 24px solid black;
  background-color: transparent;
  transform: translate(6px, 6px); 
}

.transform-target .circle.inner {
  width: 45px;
  height: 45px;
  background-color: black; 
  border: none;
  transform: translate(52.3px, -87px); 
}

.transform-target .cross {
  width: 160px;
  height: 160px;
  transform: translate(-1.5px, -182px);
}

.transform-target .cross .line {
  width: 160px;
  height: 6px;
  background: black;
  transform: translate(-3px, 70px); 
}

.transform-target .cross .line:last-child {
  transform: translate(-3px, 65.5px) rotate(90deg); 
}

.position-target {
  width: 150px;
  height: 150px;
  margin: 40px auto;
  position: relative;
}

.position-target .circle {
  border-radius: 50%;
  position: absolute;
}

.position-target .circle.outer {
  width: 90px;
  height: 90px;
  border: 24px solid black;
  background-color: transparent;
  top: 50%;
  left: 50%;
  margin-top: -69px;
  margin-left: -69px; 
}

.position-target .circle.inner {
  width: 45px;
  height: 45px;
  background-color: black; 
  border: none;
  top: 50%;
  left: 50%;
  margin-top: -23px;
  margin-left: -22px; 
}

.position-target .cross {
  position: absolute;
  width: 160px;
  height: 160px;
  top: 50%;
  left: 50%;
  margin-top: -80px; 
  margin-left: -80px; 
}

.position-target .cross .horizontal {
  position: absolute;
  width: 160px;
  height: 6px;
  background: black;
  top: 50%;
  left: 50%;
  margin-top: -3px; 
  margin-left: -80px; 
}

.position-target .cross .vertical {
  position: absolute;
  width: 6px;
  height: 160px;
  background: black;
  top: 50%;
  left: 50%;
  margin-top: -80px; 
  margin-left: -2px; 
}