// Partials / Block Stack


// Full - Stacked
// Half - Stacked
.block{
  .halves.stack,
  .full.stack{
    & + .halves.stack,
    & + .full.stack{
      margin-top:-80px;
    }
  }

  .halves.skinny,
  .full.skinny{
    & + .halves.skinny,
    & + .full.skinny{
      margin-top:-160px;
    }
  }

  .halves .half,
  .full{
    svg.icon{
      &.medium{
        width:auto;
        height:50px;
      }

      &.large{
        width:auto;
        height:65px;
      }
    }
  }

  .halves .half.stack,
  .full.stack{
    flex-direction:column;
    background-color:transparent;
    margin-top:80px;
    margin-bottom:80px;

    .icon{
      width:auto;
      height:35px;
      margin-bottom:25px;

      svg{
        width:auto;
        height:35px;
      }
    }

    .illustration{
      margin-bottom:30px;
      text-align:center;

      img{
        height:auto;
      }
    }

    .content{
      padding:0 0 50px 0;
      margin-left:auto;
      margin-right:auto;

      .title{
        font-size:23px;
        line-height:36px;
        margin-bottom:10px;

        &.small{
          font-size:23px;
        }

        &.large{
          font-size:27px;
          line-height:39px;
        }
      }

      p,
      li{
        font-size:16px;
        line-height:28px;
      }

      p,
      ol,
      ul{
        margin-bottom:25px;
      }

      .illustration{
        margin-top:50px;
      }
    }
  }

  .halves .half.stack{
    .illustration{
      img{
        max-width:250px;
      }
    }

    .content{
      max-width:370px;
    }
  }

  .full.stack{
    .illustration{
      img{
        max-width:675px;
      }
    }
  }
}

@include breakpoint($tablet-landscape){
  .block{
    .halves{
      &:last-child{
        .half.stack{
          margin-bottom:0;
        }
      }
    }
    
    .halves .half.stack,
    .full.stack{
      margin-top:50px;
      margin-bottom:50px;

      .icon{
        margin-bottom:10px;
      }

      .content{
        .title,
        p{
          max-width:310px;
        }

        .title{
          font-size:19px;
          line-height:29px;
          margin-bottom:7px;
          font-weight:500;
        }

        p{
          font-size:15px;
          line-height:23px;

          &.title{
            max-width:450px;
            margin-top:20px;

            &,
            &.small{
              font-size:20px;
              line-height:27px;
              font-weight:400;
            }
          }
        }
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .block{
    .halves.skinny,
    .full.skinny{
      & + .halves.skinny,
      & + .full.skinny{
        margin-top:-80px;
      }
    }
    
    .halves .half.stack,
    .full.stack{
      margin-top:35px;
      margin-bottom:35px;

      .icon{
        &.large{
          height:55px;
        }
      }

      .content{
        padding-bottom:0;

        .title,
        p{
          max-width:270px;
        }

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

        p{
          font-size:14px;
          line-height:23px;

          &.title{
            max-width:450px;
            margin-top:20px;

            &,
            &.small{
              font-size:20px;
              line-height:27px;
              font-weight:400;
            }
          }
        }
      }
    }
  }
}

@include breakpoint($phone){
  .block{
    .halves.stack,
    .full.stack{
      & + .halves.stack,
      & + .full.stack{
        margin-top:0;
      }
    }

    .full.divider{
      & + .halves.stack{
        margin-top:30px;
      }
    }

    .halves.skinny,
    .full.skinny{
      & + .halves.skinny,
      & + .full.skinny{
        margin-top:0;

        .half{
          &:first-child{
            margin-top:0;
          }
        }
      }
    }

    .halves{
      &:last-child{
        .half{
          &.stack{
            &:first-child{
              margin-bottom:30px;
            }
            
          }
        }
      }

      .half{
        &.stack{
          margin-top:0;
          margin-bottom:30px;

          &:first-child{
            // margin-top:30px;
          }

          .content{
            max-width:100%;
            padding-left:15px;
            padding-right:15px;

            .icon{
              margin-bottom:3px;
            }

            .title,
            p{
              max-width:100%;
            }

            p{
              padding:0;

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

    .full.stack{
      .illustration{
        img{
          max-width:100%;
        }
      }
    }
  }
}
