// Partials / Block Thirds

.block{
  &:not(.dark){
    .thirds{
      .content{
        h3.title{
          color:$blue-black;
        }
      }
    }
  }

  &.dark{
    .third{
      .content{
        color:$white;

        .title{
          color:$white;
        }

        h2.title,
        h3.title{
          color:$white;
        }

        p,li{
          color:$blue-light;
        }

        .description{
          color:$near-white-on-blue-dark;
        }
      }
    }
  }
  
  .thirds{
    margin-bottom:75px;

    & > .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;
      justify-content:space-between;
    }

    .third{
      display:flex;
      width:33.3333%;
      max-width:340px;
      padding-top:30px;
      padding-bottom:20px;

      &.middle{
        .content{
          margin:0 auto;
        }
      }

      &.right{
        .content{
          margin-left:auto;
        }
      }

      &.has-photo{
        &.photo-size-small{
          .illustration{
            img{
              transform:scale(0.75);
              margin-bottom:-25px;
            }
          }
        }

        .illustration{
          margin-bottom:20px;

          img{
            max-width:100%;
            height:auto;
          }
        }
      }
    }

    .content{
      max-width:340px;
      width:100%;

      &.center{
        text-align:center;
      }
      
      .icon{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius:50%;
        height:66px;
        width:66px;
        background-color:rgba(4, 22, 38, 0.12);
        margin-bottom:26px;

        svg{
          fill:$white;
          height:40px;
          width:40px;
        }
      }

      h2.title{
        font-size:51px;
        line-height:56px;
        font-weight:400;
        margin-bottom:3px;
        color:$white;
      }

      h3.title{
        font-size:19px;
        line-height:24px;
        font-weight:400;
        margin-bottom:10px;
      }

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

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

      .description{
        margin-bottom:20px;
        font-size:16px;
        line-height:24px;
      }
    }
  }
}

@include breakpoint($laptop-tablet){
  .block{
    .thirds{
      .third{
        padding-right:30px;
      }
    }
  }
}

@include breakpoint($tablet-landscape){
  .block{
    .thirds{
      &:last-child{
        margin-bottom:0;
      }

      & > .inner{
        padding-left:$desktop-gutter-tablet-landscape;
        padding-right:20px;
      }

      .third{
        padding-right:45px;

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

@include breakpoint($tablet-portrait){
  .block{
    .thirds{
      & > .inner{
        padding-left:30px;
        padding-right:30px;
        justify-content:space-around;
      }

      .third{
        &.has-photo{
          padding:0;
          width:50%;
          max-width:340px;
        }

        .content{
          p{
            font-size:14px;
            line-height:21px;
          }
        }
      }
    }
  }
}

@include breakpoint($tablet-phone){
  .block{
    .thirds{
      & > .inner{
        padding:0 24px;
        justify-content:space-between;
      }

      .third{
        &.has-photo{
          &:nth-child(even){
            padding-left:12px;
          }

          &:nth-child(odd){
            padding-right:12px;
          }

          max-width:50%;
        }
      }
    }
  }
}

@include breakpoint($phone){
  .block{
    .thirds{
      & > .inner{
        flex-direction:column;
        padding-left:$desktop-gutter-phone;
        padding-right:$desktop-gutter-phone;
      }

      .third{
        width:100%;
        padding:0;
        margin-bottom:50px;

        &.has-photo{
          width:100%;
          max-width:100%;

          &:nth-child(even){
            padding-left:0;
          }

          &:nth-child(odd){
            padding-right:0;
          }
        }

        .content{
          max-width:100%;
          
          p{
            &:last-of-type{
              margin-bottom:15px;
            }

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