// Partials / Steps

.block{
  .steps{
    max-width:$desktop-block-content-max-width;
    margin:0 auto;
    border-top:1px solid $line-color;
    padding-top:70px;
  }

  .step{
    display:flex;

    &.padding-top-100{
      padding-top:100px;
    }

    &.padding-bottom-110{
      padding-bottom:110px;
    }

    &.full{
      flex-wrap:wrap;

      .illustration{
        width:100%;
        padding-left:0;
        padding-right:0;
      }

      .content{
        width:100%;
        max-width:370px;
        padding-left:0;
        padding-right:0;
      }
    }

    &.reverse{
      flex-direction:row-reverse;

      .content{
        padding-left:15px;
        padding-right:53px;
      }
    }

    .illustration{
      position:relative;
      width:50%;
      padding-left:15px;

      &.up-85{
        margin-top:-85px;
      }
    }

    .content{
      width:50%;
      padding-left:53px;
      padding-right:15px;
      font-size:15px;
      line-height:28px;

      &.bottom{
        display:flex;
        align-items:flex-end;
        padding-bottom:20px;
      }

      .num{
        color:$step-num-color;
        font-size:39px;
        line-height:49px;
        font-weight:600;
        margin-bottom:7px;
      }

      .title{
        max-width:340px;
        color:$blue-black;
        font-size:20px;
        line-height:27px;
        font-weight:500;
        margin-bottom:4px;
      }

      p{
        max-width:340px;
      }
    }

  }
}
