// Partials / Block Thirds

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

        .title{
          color:$white;
        }

        h3.title{
          color:$blue;
        }

        p,li{
          color:$blue-light;
        }
      }
    }
  }
  
  .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;
      align-items:center;
      width:33.3333%;
      max-width:340px;
      padding-top:30px;
      padding-bottom:20px;
    }

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

      &.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;
        }
      }

      .title{
        font-size:17px;
        line-height:21px;
        font-weight:600;
        margin-bottom:10px;
      }

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

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