/* =========================================================
   VITA — OUR APPROACH STEPS FIX V2
   ========================================================= */


/* each step becomes a clean editorial grid */

.approach-steps > article{

  display:grid!important;

  grid-template-columns:
    34px
    minmax(250px, 340px)
    minmax(280px, 1fr)!important;

  grid-template-rows:
    auto
    auto!important;

  column-gap:
    clamp(
      18px,
      2.5vw,
      38px
    )!important;

  row-gap:20px!important;

  align-items:start!important;

  padding:
    42px
    0
    46px!important;

  border-bottom:
    1px solid
    rgba(19,39,37,.14)!important;

}


/* number */

.approach-steps > article > span{

  grid-column:1!important;
  grid-row:1!important;

  align-self:center!important;

  margin:0!important;

  color:#b48d42!important;

  font-size:11px!important;

  line-height:1!important;

}


/* label */

.approach-steps > article > small{

  grid-column:2!important;
  grid-row:1!important;

  align-self:center!important;

  margin:0!important;

  color:#0b7978!important;

  font-size:10px!important;

  font-weight:600!important;

  letter-spacing:.18em!important;

  line-height:1.2!important;

}


/* title */

.approach-steps > article > h3{

  grid-column:
    1 / 3!important;

  grid-row:2!important;

  width:auto!important;
  max-width:430px!important;

  margin:0!important;
  padding:0!important;

  color:#132725!important;

  font-size:
    clamp(
      52px,
      4.7vw,
      76px
    )!important;

  font-weight:300!important;

  line-height:.92!important;

  letter-spacing:-.06em!important;

  word-break:normal!important;
  overflow-wrap:normal!important;
  hyphens:none!important;

  text-wrap:balance!important;

}


/* description */

.approach-steps > article > p{

  grid-column:3!important;
  grid-row:2!important;

  width:auto!important;
  max-width:520px!important;

  margin:
    5px
    0
    0!important;

  padding:0!important;

  color:#74817e!important;

  font-size:
    clamp(
      14px,
      1vw,
      17px
    )!important;

  line-height:1.8!important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .approach-steps > article{

    grid-template-columns:
      32px
      minmax(220px, 300px)
      minmax(240px, 1fr)!important;

    column-gap:20px!important;

  }


  .approach-steps > article > h3{

    max-width:350px!important;

    font-size:
      clamp(
        48px,
        6vw,
        66px
      )!important;

  }


  .approach-steps > article > p{

    font-size:14px!important;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:720px){

  .approach-steps > article{

    display:grid!important;

    grid-template-columns:
      32px
      1fr!important;

    grid-template-rows:
      auto
      auto
      auto!important;

    column-gap:14px!important;

    row-gap:16px!important;

    padding:
      34px
      0
      38px!important;

  }


  .approach-steps > article > span{

    grid-column:1!important;
    grid-row:1!important;

  }


  .approach-steps > article > small{

    grid-column:2!important;
    grid-row:1!important;

  }


  .approach-steps > article > h3{

    grid-column:
      1 / -1!important;

    grid-row:2!important;

    max-width:100%!important;

    font-size:
      clamp(
        42px,
        12.5vw,
        58px
      )!important;

    line-height:.94!important;

  }


  .approach-steps > article > p{

    grid-column:
      1 / -1!important;

    grid-row:3!important;

    max-width:100%!important;

    margin:0!important;

    font-size:15px!important;

    line-height:1.75!important;

  }

}