// 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:600px;
        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;
      color:$blue-grey-med;

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

      &.center{
        p{
          margin-left:auto;
          margin-right:auto;
        }
      }

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

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

      p{
        max-width:340px;
        color:$blue-grey-med;
      }
    }

  }
}

@include breakpoint($tablet-landscape){
  .block{
    .steps{
      padding-left:$desktop-gutter-tablet-landscape;
      padding-right:$desktop-gutter-tablet-landscape;

      .step-line{
        position:relative;
        margin-top:-50px;
      }

      .step{
        &:last-child{
          padding:0;
        }

        &.reverse{
          .content{
            padding-left:0;
            padding-right:25px;
          }
        }

        &.full{
          .content{
            padding-left:0;
            padding-right:0;
          }

          &:last-child{
            .content{
              padding-bottom:0;
            }
          }
        }

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

        &.tablet-landscape-padding-bottom-0{
          padding-bottom:0;
        }

        .content{
          padding-left:25px;
          padding-right:0;
          font-size:14px;
          line-height:23px;

          .num{
            font-size:29px;
            line-height:39px;
            margin-bottom:0;
          }

          .title{
            font-size:16px;
            line-height:27px;
          }

          p{
            &:last-child{
              margin-bottom:0;
            }
          }
        }

        .illustration{
          &.up-85{
            margin-top:0;
          }

          &.tablet-landscape-up-60{
            margin-top:-60px;
          }
        }
      }
    }
  }
}

@include breakpoint($phone){
  .block{
    .steps{
      padding:40px $desktop-gutter-phone;

      .step-line{
        display:none;
      }

      .step{
        flex-direction:column-reverse;
        padding-bottom:35px;

        &.padding-bottom-110,
        &.tablet-landscape-padding-bottom-0{
          padding-bottom:35px;
        }

        &.reverse{
          .content{
            padding:0;
          }
        }

        .illustration{
          position:relative;
          left:-10px;
          right:-10px;
          width:calc(100% + 20px);
          padding:0;

          &.tablet-landscape-up-60{
            margin-top:0;
          }

          &.phone-down-20{
            margin-top:20px;
          }

          &.phone-left-5{
            position:relative;
            left:5px;
          }
        }

        .content{
          text-align:center;
          width:100%;
          padding:0;
          margin-bottom:20px;
          margin-left:auto;
          margin-right:auto;

          &.bottom{
            display:flex;
            justify-content:center;
          }

          h2,
          p{
            margin-left:auto;
            margin-right:auto;
          }
        }
      }
    }
  }
}
