.steps {
  counter-reset: step-counter;
  margin-left: 0;
  overflow: hidden;
  padding-left: 0;

  > li {
    display: block;
    list-style-type: decimal;
    margin-left: 0;
    padding: .75em 0 .75em 2.2em;
    position: relative;

    @include ie-lte(8) {
      display: list-item;
      margin: 0 0 5px 1.5em;
      padding: .75em 0;
    }

    p {
      margin: 0;
    }

    &:before {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      content: counter(step-counter);
      counter-increment: step-counter;
      display: block;
      font-size: 14px;
      font-weight: 600;
      height: 24px;
      left: 0;
      line-height: 25px;
      position: absolute;
      text-align: center;
      top: .75em;
      width: 24px;

      @include ie-lte(8) {
        display: none;
      }

      @include media(tablet) {
        top: .9em;
      }
    }
  }
}

.steps {
  counter-reset: step-counter;
  margin-left: 0;
  overflow: hidden;
  padding-left: 0;

  > li {
    display: block;
    list-style-type: decimal;
    margin-left: 0;
    padding: .75em 0 .75em 2.2em;
    position: relative;

    @include ie-lte(8) {
      display: list-item;
      margin: 0 0 5px 1.5em;
      padding: .75em 0;
    }

    p {
      margin: 0;
    }

    &:before {
      background: $color-black;
      border-radius: 50%;
      color: $color-white;
      content: counter(step-counter);
      counter-increment: step-counter;
      display: block;
      font-size: 14px;
      font-weight: 600;
      height: 24px;
      left: 0;
      line-height: 24px;
      position: absolute;
      text-align: center;
      top: .75em;
      width: 24px;

      @include ie-lte(8) {
        display: none;
      }

      @include media(tablet) {
        top: .9em;
      }
    }
  }
}

Correct steps line-height to match height of circle
Correct steps line-height to match height of circle

This ensures the text is vertical centered correctly
