.block-description {
  &--wrapper {
    @extend %decor--flex;
    @extend %decor--flex-wrap;
  }

  &--text {
    padding: 12px 0;
    width: calc(100% - 15px);

    @media (min-width: $screen-tablet) {
      margin: 0 15px;
      padding: 24px 0;
    }

    h2 {
      @include breakpoint (768px) {
        font-size: 26px;
      }
      @include breakpoint (1024px) {
        font-size: 30px;
      }
      &.with-icon {
        padding-left: 28px;
        @include breakpoint (768px) {
          padding-left: 32px;
        }
        @include breakpoint (1024px) {
          padding-left: 40px;
        }
      }
    }

    h4 {
      @include cachet();
      font-size: 26px;
      line-height: lh(30, 26);
      color: $purple;
      margin: 0 0 10px;
      vertical-align: middle;

      @media (min-width: $screen-tablet) {
        font-size: 36px;
        line-height: lh(40, 36);
      }
    }

    .fa {
      color: $purple;
      font-size: 24px;
      vertical-align: middle;
      margin-right: 10px;
      max-height: 24px;
      max-width: 24px;
      float: left;
      width: auto;
      @media (min-width: $screen-tablet) {
        font-size: 26px;
        max-height: 26px;
        max-width: 26px;
      }
      @media (min-width: $screen-desktop) {
        font-size: 30px;
        max-height: 30px;
        max-width: 30px;
      }
    }

    .field-icon {
      vertical-align: middle;
      margin-right: 5px;
      float: left;
      img {
        vertical-align: middle;
        max-height: 24px;
        max-width: 24px;
        width: auto;
        @media (min-width: $screen-tablet) {
          max-height: 28px;
          max-width: 28px;
        }
        @media (min-width: $screen-desktop) {
          max-height: 35px;
          max-width: 35px;
        }
      }
    }

    p {
      font-size: 13px;
      line-height: lh(20, 13);
      margin: 0;

      @media (min-width: $screen-tablet){
        font-size: 15px;
        line-height: lh(22, 15);
      }
    }

    .content {
      margin: 0 0 10px 0;
    }

    .field-sb-link {
      @include read-more-link();
    }


    .field-sb-body {
      @media (min-width: $screen-tablet) {
        font-size: 15px;
        line-height: lh(22, 15);
      }
    }
  }

  &--2 {
    .block-description--text {
      &:nth-child(1) {
        margin-left: 0;
      }
      &:nth-child(2) {
        margin-right: 0;
      }
      @media (min-width: $screen-tablet) {
        width: calc(100% / 2 - 15px);
      }
    }
  }

  &--3 {
    .block-description--text {
      border-top: 1px solid $darker-grey;
      border-bottom: 1px solid $darker-grey;

      .field-branch-am,
      .field-sb-body {
        padding: 15px 0;
      }
      .field-sb-link {
        display: block;
        width: 100%;
      }

      h2 {
        @include cachet();
        margin-top: 0px;
        font-size: 22px;
        color: $default-grey;
        text-align: left;
      }
      border-top: 1px solid $darker-grey;
      border-bottom: 1px solid $darker-grey;
      @media (min-width: $screen-tablet){
        width: calc(100% / 3 - 30px);
        position: relative;
        margin-bottom: 10px;
      }
    }

  }

  &--4 {
    display: block;
    @media (min-width: $screen-tablet) {
      display: flex;
    }
    @media (min-width: $screen-tablet) {
      .wrapper {
        display: flex;
        flex-wrap: wrap;
      }
    }
    .block-description--text {
      @media (min-width: $screen-tablet) {
        width: calc(100% / 4 - 30px);
      }
    }

    .fa-icon {
      text-align: center;
      .fa {
        float: none;
        margin: 15px auto;
        width: 100%;
      }
    }

    .field-icon {
      float: none;
      margin: 10px auto;
      .field-image {
        width: 100%;
      }
    }
  }
}

.block-description--wrapper--outline--top {
  .block-description--text {
    border-top: 1px solid $dark-grey;
  }
  &.paragraph-1c-wrapper {
    border-top: 1px solid $dark-grey;
    .field-prgf-1c-description {
      padding-top: 24px;
    }
  }
}
