%nw-storycomponent-template1 {
  &.nw-storycomponent-content {
    padding: 20px 0 10px;

    &.is-desktop:hover {
      .nw-storycomponent-cta {
        color: $color-primary !important;
      }
    }
  }

  &.nw-storycomponent-title {
    font-size: $font-size-lg;
    font-family: $secondary-font-family;
  }

  &.nw-storycomponent-subtitle {
    font-size: $font-size-xs;
  }

  &.nw-storycomponent-cta {
    font-size: $font-size-xs;
    font-family: $secondary-font-family;
  }
}

/* Mobile Storycomponent */
%nw-storycomponent-template2 {
  &.is-mobile {
    &.nw-storycomponent {
      margin: 0 -7.5px 20px;
    }

    &.nw-storycomponent-content {  
      position: absolute;
      z-index: 1;
      top: 50%;
      transform: translateY(-50%);
      width: 50%;
      padding: 5px 15px;
    }

    &.nw-storycomponent-title {
      font-size: $font-size-xs;
    }

    &.nw-storycomponent-subtitle {
      margin-bottom: 15px;
      padding: 0;
      font-size: $font-size-xxs;
    }

    &.nw-storycomponent-content.nw-storygrid-storyodd {
      left: 0;
    }

    &.nw-storycomponent-content.nw-storygrid-storyeven {
      right: 0;
    }

  }
}

%nw-storycomponent-brandmastertemplate {
  &.nw-storycomponent-content {
    padding: 16px 0;
  }

  &.nw-storycomponent-title {
    margin-bottom: 8px;
    font-size: $font-size-xs;
    font-family: $secondary-font-family;
    line-height: 18px;
  }

  &.nw-storycomponent-subtitle {
    margin-bottom: 8px;
    font-size: $font-size-xs;
    font-family: $primary-font-family;
    line-height: 1.29;
    letter-spacing: 0.6px;
  }
  
  &.nw-storycomponent-cta {
    font-size: $font-size-xs;
    font-family: $secondary-font-family;
    line-height: 18px;
  }
}

/* Mobile brand master Storycomponent */
%nw-storycomponent-mobiletemplate {
  &.is-mobile {
    &.nw-storycomponent-cta {
      border: 1px solid $default-color;
      padding: 10px;
      font-size: $font-size-xxs;
    }
  }
}

.nw-mt-primarystories {
  @extend %nw-storycomponent-template1;
  @extend %nw-storycomponent-mobiletemplate;
}

// .nw-mt-primarystories:not(.nw-mt-nw) {
//   @extend %nw-storycomponent-template2;
// }

.nw-mt-secondarystories {
  @extend %nw-storycomponent-template1;
}

.nw-mt-primarystories {
  @extend %nw-storycomponent-brandmastertemplate;
}

.nw-mt-secondarystories {
  @extend%nw-storycomponent-brandmastertemplate;
}