$h1-font-size: $font-size-base * 3.75; //60px
$h2-font-size: $font-size-base * 3; // 48px
$h3-font-size: $font-size-base * 1.5; // 24px
$h4-font-size: $font-size-base; // 16px
$h5-font-size: $font-size-base; 
$h6-font-size: $font-size-base * 0.67; 

$h1-font-size-md: $font-size-base * 3; // 48px
$h2-font-size-md: $font-size-base * 2.5; // 40px

$h1-font-size-sm: $font-size-base * 1.9; // 30px
$h2-font-size-sm: $font-size-base * 1.75;  // 28px
$h3-font-size-sm: $font-size-base * 1.25; // 20px

// defaults for mobile first

h1,
.h1 {
  font-size: $h1-font-size-sm;
}

h2,
.h2 {
  font-size: $h2-font-size-sm;
}

h3,
.h3 {
  font-size: $h3-font-size-sm;
}

h4,
.h4 {
  font-size: $h4-font-size;
}

h5,
.h5 {
  font-size: $h5-font-size;
}

h6,
.h6 {
  font-size: $h6-font-size;
}

@include media-breakpoint-up(md) {
  h1,
  .h1 {
    font-size: $h1-font-size-md;
  }

  h2,
  .h2 {
    font-size: $h2-font-size-md;
  }

  h3,
  .h3 {
    font-size: $h3-font-size;
  }
}

@include media-breakpoint-up(xl) {
  %heading {
    padding-bottom: 15px;
  }

  h1,
  .h1 {
    font-size: $h1-font-size;
  }

  h2,
  .h2 {
    font-size: $h2-font-size;
  }
}