.heading {
  $block: unquote("#{&}");
  font-size: $font-large;
  padding: 0 0 1em;
  font-weight: 700;
  &:before {
    background: url("/static/img/lines/yegna/divider.svg") no-repeat 0 0 / auto;
    content: "";
    display: block;
    margin: 1em 0 0;
    padding: 1em;
    width: auto;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 20px;
  }
  &--sidebar {
    &:before {
      @include for-size(tablet-landscape-up) {
        background-position: 0 -45px;
      }
    }
  }
  &--hero {
    text-align: center;
    padding: 1em 0;
    font-size: $font-x-large;
    @media screen and (min-width: 62.000em) {
      font-size: $font-x-largest;
    }
    &:before {
      display: none;
      visibility: hidden;
    }
  }
  &--macro {
    text-align: left;
    padding: 1em 0;
    &:before {
      display: none;
      visibility: hidden;
    }
  }
  //Watch Category
  &--video {
    #{$block}__component:before {
      background: url("/static/img/icons/yegna/icon-watch-purple.svg") no-repeat center center / 100%;
      width: 15px;
    }
  }
  //Listen Category
  &--listen {
    #{$block}__component:before {
      background: url("/static/img/icons/yegna/icon-listen.svg") no-repeat center center / 100%;
      height: 30px;
    }
  }
  //News Category
  &--general-featured {
    #{$block}__component:before {
      background: url("/static/img/icons/yegna/icon-heading.svg") no-repeat center center / 100%;
    }
  }
  //Cast Category
  &--sidebar-featured {
    #{$block}__component:before {
      height: 30px;
      background: url("/static/img/icons/yegna/icon-characters.svg") no-repeat center center / 100%;
    }
  }
  &__component {
    color: $color-purple;
    display: inline-block;
    font-size: $font-x-large;
    @media screen and (min-width: 62.000em) {
      font-size: $font-x-largest;
    }
    &--inner {
      display: inline-block;
    }
    &:before {
      background: url("/static/img/icons/yegna/icon-heading.svg") no-repeat center center / 100%;
      content: "";
      display: inline-block;
      margin: 0 0.5em 0 0;
      height: 20px;
      vertical-align: middle;
      width: 30px;
    }
  }
  &__subheading {
    color: $color-purple;
    display: block;
    text-align: center;
    font-size: $font-x-large;
    @media screen and (min-width: 62.000em) {
      font-size: $font-x-largest;
    }
  }
  &__title {
    color: $color-purple;
    display: inline-block;;
    font-size: $font-x-large;
    @media screen and (min-width: 62.000em) {
      font-size: $font-x-largest;
    }
  }
  &__subtitle {
    color: #000;
    font-size: 1.1em;
  }
}

.section {
  &__title {
    font-size: $font-x-medium;
  }
}
