// Partials / Block Full

.block{
  &.dark{
    .full{
      &.divider{
        .content{
          border-color:rgba(255,255,255,0.1);
        }
      }
      
      .content{
        color:$white;

        .title{
          color:$white;
        }

        h3.title{
          color:$blue;
        }

        p,li{
          color:$near-white-on-blue-dark;
        }
      }
    }
  }
  
  .full{
    &.divider{
      .content{
        border-bottom:1px solid $line-color;
      }
    }

    .content{
      max-width:$desktop-block-content-max-width;
      margin:0 auto;
      font-size:18px;
      line-height:30px;
      padding:40px 0;

      &.center{
        text-align:center;

        p,
        ul,
        ol{
          max-width:600px;
          margin:0 auto 25px;
        }
      }

      .illustration{
        max-width:675px;
        margin-left:auto;
        margin-right:auto;
        
        img{
          max-width:100%;
        }
      }

      .title{
        font-size:27px;
        line-height:39px;
        font-weight:500;
        color:$blue-black;
        margin-bottom:10px;

        &.center{
          text-align:center;
        }

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

        &.font-weight-300{
          font-weight:300;
        }

        &.blue-light{
          color:$blue-light-on-blue-med;
        }
      }

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

      h3.title{
        padding-top:28px;
        font-size:21px;
        line-height:25px;
      } 

      .actions{
        display:inline-flex;

        .button{
          margin-right:15px;

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

@include breakpoint($tablet-landscape){
  .block{
    .full{
      .content{
        font-size:16px;
        line-height:26px;

        &.center{
          p{
            max-width:400px;
          }
        }

        .title{
          font-size:24px;
          line-height:29px;
        }

        .title,
        p{
          max-width:400px;
          margin-left:auto;
          margin-right:auto;
        }
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .block{
    .full{
      .content{
        font-size:15px;
        line-height:24px;

        &.center{
          padding-top:10px;

          p{
            max-width:400px;
          }
        }

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

        .title,
        p{
          max-width:400px;
          margin-left:auto;
          margin-right:auto;
        }
      }
    }
  }
}

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