.wrapper img{
  width: 40%;
}
.wrapper p.h6{
  text-transform: capitalize;
}
@media (min-width: 769px){

  .wrapper {
    font-family: 'Helvetica';
    font-size: 14px;
    position: relative;
  }
  
  .StepProgress {
    position: relative;
    padding-left: 45px;
    list-style: none;
  }
  .StepProgress::before {
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 17px;
    width: 10px;
    height: 100%;
    border-left: 2px solid #CCC;
  }
  
  .StepProgress-item {
    position: relative;
    counter-increment: list;
    color: #7d7d7d;
  }
  .StepProgress-item:not(:last-child) {
    padding-bottom: 20px;
  }
  
  .StepProgress-item::before {
    display: inline-block;
    content: '';
    position: absolute;
    left: -28px;
    height: 100%;
    width: 10px;
    border-left: 2px solid #CCC;
  }
  
  .StepProgress-item::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: -37px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #FFF;
    border: 2px solid #CCC;
  }
  
  .StepProgress-item.is-done {
    color: #28a745;
  }
  .StepProgress-item.is-done::before {
    border-left: 2px solid #28a745;
  }
  .StepProgress-item.is-done::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    font-size: 10px;
    color: white;
    text-align: center;
    border: 2px solid #28a745;
    background-color: #28a745;
  }
  
  .StepProgress-item.current {
    color: #007bff;
  }
  .StepProgress-item.current::before {
    border-left: 2px solid #CCC;
  }
  
  .StepProgress-item.current::after {
    padding-top: 1px;
    width: 20px;
    height: 20px;
    top: -4px;
    left: -37px;
    font-size: 14px;
    text-align: center;
    color: #007bff;
    border: 2px solid #007bff;
    background-color: white;
  }
  
  strong {
    display: block;
  }
}

@media (max-width: 768px){
  .wrapper {
    width: 90%;
    margin: 30px 5% 5% 30px;
    display: initial;
  }
  .StepProgress {
      counter-reset: step;
      padding: 0;
      width: 100%;
      display: flex;
  }
  .StepProgress-item {
      list-style-type: none;
      float: left;
      font-size: 12px;
      position: relative;
      text-align: center;
      color: #7d7d7d;
      width: inherit;
  }
  .StepProgress-item:before {
      width: 30px;
      height: 30px;
      content: '';
      counter-increment: step;
      line-height: 30px;
      border: 2px solid #7d7d7d;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }
  .StepProgress-item:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #7d7d7d;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  .StepProgress-item:first-child:after {
      content: none;
  }
  .StepProgress-item.is-done {
      color: #28a745;
  }
  .StepProgress-item.is-done:before {
      border-color: #28a745;
  }
  .StepProgress-item.is-done + li:after {
      background-color: #28a745;
  }
  .StepProgress-item.current {
      color: #007bff;
  }
  .StepProgress-item.current:before {
      border-color: #007bff;
  }
  .StepProgress-item.current + li:after {
      background-color: #007bff;
  }
}