$news-hero-height: 50vh !default;
$news-hero-large-height: 70vh !default;

.news-hero {
    @include border-radius($radius);
    @include margin(1,null,1,null);
    @include breakpoint(small) {
        height: $news-hero-height*0.6;
    }
    @include breakpoint(medium) {
        height: $news-hero-height*0.8;
    }
    @include breakpoint(large) {
        height: $news-hero-height*1;
    }
}
.news-hero-large {
    height: 100%;
    
    @include breakpoint(small) {
        min-height: $news-hero-large-height*0.5;
    }
    @include breakpoint(medium) {
        min-height: $news-hero-large-height 0.7;
    }
    @include breakpoint(large) {
        min-height: $news-hero-large-height;
    }
}
.news-hero, .news-hero-large {
    background: url('https://static.pexels.com/photos/248064/pexels-photo-248064.jpeg') 50% no-repeat;
    background-color: #444;
    position: relative;
    background-size: cover;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: left;
    display: flex;
    width:100%;

  .news-hero-text {
    position: absolute;
    bottom: 15%;
    @include breakpoint(small) {
        left: 5%;
    }
    @include breakpoint(medium) {
        left: 10%;
    }
    @include breakpoint(large) {
        left: 20%;
    }
    color: $white;
    text-shadow: 1px 1px 2px $black;
  }
}


 $header-styles-news-hero: (
  small: (
    'h1': ('font-size': 21),
    'h2': ('font-size': 20),
    'h3': ('font-size': 19),
    'h4': ('font-size': 18),
    'h5': ('font-size': 17),
    'h6': ('font-size': 16),
  ),
  medium: (
    'h1': ('font-size': 38),
    'h2': ('font-size': 22),
    'h3': ('font-size': 21),
    'h4': ('font-size': 18),
    'h5': ('font-size': 16),
    'h6': ('font-size': 15),
  ),
) !default;
 
 @each $size, $headers in  $header-styles-news-hero {
    @include breakpoint($size) {
      @each $header, $header-defs in $headers {
        $font-size-temp: 1rem;
        div.news-hero-text > #{$header}, .#{$header} {
            
          @if map-has-key($header-defs, font-size) {
            $font-size-temp: rem-calc(map-get($header-defs, font-size));
            font-size: $font-size-temp;
          } @else if map-has-key($header-defs, fs) {
            $font-size-temp: rem-calc(map-get($header-defs, fs));
            font-size: $font-size-temp;
          } @else if $size == $-zf-zero-breakpoint {
            font-size: $font-size-temp;
          }
          @if map-has-key($header-defs, line-height) {
            line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
          } @else if map-has-key($header-defs, lh) {
            line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
          } @else if $size == $-zf-zero-breakpoint {
            line-height: unitless-calc($header-lineheight, $font-size-temp);
          }

          @if map-has-key($header-defs, margin-top) {
            margin-top: rem-calc(map-get($header-defs, margin-top));
          } @else if map-has-key($header-defs, mt) {
            margin-top: rem-calc(map-get($header-defs, mt));
          } @else if $size == $-zf-zero-breakpoint {
            margin-top: 0;
          }
          @if map-has-key($header-defs, margin-bottom) {
            margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
          } @else if map-has-key($header-defs, mb) {
            margin-bottom: rem-calc(map-get($header-defs, mb));
          } @else if $size == $-zf-zero-breakpoint {
            margin-bottom: rem-calc($header-margin-bottom);
          }
        }
      }
    }
  }
