// Partials / Block Halves

.block{
  &.dark{
    .halves{
      &.divider{
        .half{
          &:first-child{
            border-color:rgba(255,255,255,0.2);
          }
        }
      }

      .content{
        color:$white;

        h3.title{
          color:$blue;
        }

        p,li{
          color:$near-white-on-blue-dark;
        }
      }
    }
  }

  .halves{
    &.reverse{
      flex-direction:row-reverse;
    }

    &.divider{
      .half{
        &:first-child{
          border-right:1px solid $line-color;
        }
      }
    }

    & > .inner{
      max-width:$desktop-max-width;
      padding-left:$desktop-gutter;
      padding-right:$desktop-gutter;
      margin-left:auto;
      margin-right:auto;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
    }

    .half{
      display:flex;
      align-items:center;
      width:50%;
      padding-top:30px;
      padding-bottom:20px;

      &.stack{
        flex-direction:column;
        background-color:transparent;
        margin-top:80px;
        margin-bottom:80px;

        .illustration{
          margin-bottom:30px;

          img{
            max-width:250px;
            height:auto;
          }
        }

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

          .title{
            font-size:24px;
            line-height:36px;
            margin-bottom:10px;
          }
  
          p,
          li{
            font-size:16px;
            line-height:28px;
          }

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

    .illustration{
      img{
        width:100%;
      }

      &.center{
        position:relative;
        margin:0 auto;
        width:50%;
      }
    }

    .content{
      max-width:525px;
      padding-left:65px;

      &.center{
        text-align:center;
      }
      
      .title{
        font-size:30px;
        line-height:39px;
        font-weight:600;
        margin-bottom:25px;
      }

      h3.title{
        font-size:16px;
        font-weight:400;
        margin-bottom:10px;
      }

      p,
      li{
        font-size:18px;
        line-height:30px;
      }

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

      .actions{
        display:inline-flex;

        .button{
          margin-right:15px;

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