// Partials / Block Header

.block{
  &:not(.dark){    
    .block-header{
      & > .title{
        color:$black;
      }

      & > h3.title{
        color:$blue;
      }

      p,li{
        color:alpha($black,5);
      }
    }
  }

  &.dark{    
    .block-header{
      & > .title{
        color:$white;
      }
    }
  }

  .block-header{
    max-width:$desktop-max-width;
    margin-left:auto;
    margin-right:auto;
    padding:0 $desktop-gutter 50px $desktop-gutter;

    &:first-child{
      margin-top:50px;
    }

    &.snug{
      padding-bottom:40px;
    }

    &.full{
      p,
      li{
        max-width:100%;
      }
    }

    .title{
      max-width:550px;
      font-size:33px;
      line-height:41px;
      font-weight:500;
      margin-bottom:18px;
    }

    p,
    li{
      max-width:550px;
      font-size:21px;
      line-height:32px;
      color:$blue-light;

      &.white{
        color:$white;
      }
    }
  }
}

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

      & + .thirds{
        margin-top:-30px;
      }

      .title{
        font-size:29px;
        line-height:39px;
        max-width:400px;
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .block{
    .block-header{
      padding-left:$desktop-gutter-tablet-portrait;
      padding-right:$desktop-gutter-tablet-portrait;
    }
  }
}

@include breakpoint($phone){
  .block{
    .block-header{
      padding-left:$desktop-gutter-phone;
      padding-right:$desktop-gutter-phone;

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