/* совместимость: если у тебя BS5, он уже имеет .visually-hidden */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.stepper{
  --dot: 14px;        /* внутренний кружок */
  --ring: 24px;       /* внешний круг */
  --gap: 0px;        /* отступ до линии */
  --line: 2px;        /* толщина линии */
  --c-done: #58B9E5;  /* синий */
  --c-todo: #d9d9d9;  /* серый */
  --c-ring: rgba(255, 255, 255, 0.25);

  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  width: 170px;
  margin: 0 auto;
}

.step{
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;                 /* равномерно на всю ширину */
  min-width: var(--ring);
}

/* линия между шагами */
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  left: calc(var(--ring) + var(--gap));
  right: var(--gap);
  height: var(--line);
  background: var(--c-todo);
  border-radius: 999px;
}

/* кружок */
.step .dot{
  width: var(--ring);
  height: var(--ring);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

/* внутренний кружок */
.step .dot::before{
  content:"";
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--c-todo);
}

/* состояния */
.step.is-done .dot{
  background: var(--c-ring);
}
.step.is-done .dot::before{
  background: var(--c-done);
}
.step.is-done::after{
  background: var(--c-done);
}

.step.is-active .dot{
  background: var(--c-ring);
}
.step.is-active .dot::before{
  background: var(--c-done);
}

/* аккуратнее на очень узких экранах 
@media (max-width: 420px){
  .stepper{ --ring: 28px; --dot: 12px; --gap: 10px; }
}
*/

.step:last-child{ flex: 0 0 0;}