.wrapper {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: -1rem;
}
.meter {
  width: 100%;
  height: auto;
  transform: rotateX(180deg);
  z-index: 100;
}
.circle {
  fill: none;
}
.outline,
.mask {
  stroke: #f1f1f1;
  stroke-width: 0;
}
.range {
  stroke-width: 30;
}
.meter_needle1,
#meter_needle2,
#meter_needle3,
#meter_needle4,
#meter_needle5,
#meter_needle6,
#meter_needle7,
#meter_needle8,
#meter_needle11,
#meter_needle12 {
  height: 30%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 30%;
  transform-origin: bottom center;
  transform: rotate(270deg);
}
@media only screen and (min-width: 280px) and (max-width: 768px) {
  .meter_needle1 {
    height: 28%;
    top: 44%;
  }
  .wrapper {
    height: 100px;
    width: 100px;
  }
}