/* Fonts
----------------------------------------------- */
$font-size-base: 16px; // Assumes the browser default, typically `16px`
$font-size-lg: 1.25rem !default;
$font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;

$font-sizes-h1: (min: 30px, mid: 5.5vw, max: 66px);
$font-sizes-h2: (min: 25px, mid: 4.5vw, max: 54px);
$font-sizes-h3: (min: 20px, mid: 3.5vw, max: 42px);
$font-sizes-h4: (min: 18px, mid: 3.25vw, max: 36px);
$font-sizes-h5: (min: 18px, mid: 22px, max: 30px);
$font-sizes-h6: (min: 16px, mid: 20px, max: 24px);
$font-sizes-bd: (min: 14px, mid: 16px, max: 18px);

/* Font Styles
----------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    display: block;
    margin: 2.5rem 0 1rem;
    line-height: 1.1;
     &:first-child {
      margin-top: 0;
    }
}

h1, .hdg--1 {
    @include responsive-text( $font-sizes-h1 );
}

h2, .hdg--2 {
    @include responsive-text( $font-sizes-h2 );
}

h3, .hdg--3 {
    @include responsive-text( $font-sizes-h3 );

    &.medium {
      @include responsive-text(( min: 20px, mid: 3.1vw, max: 36px ));
    }

    &.small {
      @include responsive-text(( min: 20px, mid: 2.75vw, max: 24px ));
    }
}

h4, .hdg--4 {
    @include responsive-text( $font-sizes-h4 );
}

h5, .hdg--5 {
    @include responsive-text( $font-sizes-h5 );
}

h6, .hdg--6 {
    @include responsive-text( $font-sizes-h6 );
}

.icon-sc {
  display: inline-block;
  fill: currentColor;
  width: .8em;
  height: .8em;
}
