.position-indicator {
  display: flex;
  flex-direction: column;
  padding-top: 1.15rem;
  margin-right: .5rem;
}
.vertical-line {
  height: 20rem;
  border: 2px solid var(--smoke);
  position: absolute;
}
.pos1,
.pos2,
.pos3,
.pos4 {
  position: absolute;
}
.pos4 {
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background: var(--smoke);
  margin-left: -.52rem;
  bottom: -.6rem;
}
.pos1 img {
  margin-left: -.53rem;
  margin-top: -1rem;
  padding-bottom: 1rem;
}
.pos2,
.pos3 {
  width: 1rem;
  height: 1rem;
  border: 4px solid var(--smoke);
  color: var(--smoke);
  margin-left: -.52rem;
  border-radius: 1rem;
  background: var(--vape);
}
.pos2 {
  top: 25%;
}
.pos3 {
  top: 50%;
}

/* Specific position indicator use */
/* impact modal */
.impact-pos-vertical-line {
  height: 27rem;
}
.impact-pos2 {
  top: 7.1rem;
  background: var(--white);
}
.impact-pos3 {
  top: 15.25rem;
  background: var(--white);
}
/* cart screen */
.cart-pos-vertical-line {
  margin: -.1rem 1rem 0 .45rem;
  height: 25.45rem;
  position: relative;
}
.cart-pos2 {
  top: 7.3rem;
}
.cart-pos3 {
  top: 15.5rem;
}
@media (max-width: 525px) {
  /* impact modal */
  .impact-pos-vertical-line {
    height: 30rem;
  }
  .impact-pos2 {
    top: 8.8rem;
  }
  .impact-pos3 {
    top: 18.3rem;
  }
}
@media (max-width: 640px) {
  /* cart screen */
  .cart-pos-vertical-line {
    margin: -.1rem 1rem 0 0;
    height: 29.85rem;
  }
  .cart-pos2 {
    top: 8.75rem;
  }
  .cart-pos3 {
    top: 18.52rem;
  }
}