Cacher is the code snippet organizer for pro developers

h1 {
  font-size: 54px;
}

h2 {
  font-size: 45px;
}

h3 {
  font-size: 37px;
}

h4 {
  font-size: 31px;
}

h5 {
  font-size: 26px;
}

h6 {
  font-size: 18px;
}

@media (min-width: 500px) {
  h1 {
    font-size: 101px;
  }

  h2 {
    font-size: 76px;
  }

  h3 {
    font-size: 57px;
  }

  h4 {
    font-size: 43px;
  }

  h5 {
    font-size: 32px;
  }

  h6 {
    font-size: 18px;
  }
}

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Modular Scale (v2.0.6)
// ----

@import "modular-scale";
@import "breakpoint";

$ms-base   : 18px;
$ms-ratio  : $fourth;

$ms-norm     : $ms-base;
$ms-med      : ms(2);
$ms-lrg      : ms(3);
$ms-xlrg     : ms(4);
$ms-xxlrg    : ms(5);
$ms-xxxlrg   : ms(6);

$ms-smscr-ratio: $minor-third;

$ms-smscr-norm     : $ms-base;
$ms-smscr-med      : ms(2, $ms-base, $ms-smscr-ratio);
$ms-smscr-lrg      : ms(3, $ms-base, $ms-smscr-ratio);
$ms-smscr-xlrg     : ms(4, $ms-base, $ms-smscr-ratio);
$ms-smscr-xxlrg    : ms(5, $ms-base, $ms-smscr-ratio);
$ms-smscr-xxxlrg   : ms(6, $ms-base, $ms-smscr-ratio);

$bp-sm: 500px;

$headings: (
  h1: (
    $ms-xxxlrg,
    $ms-smscr-xxxlrg
  ),
  h2: (
    $ms-xxlrg,
    $ms-smscr-xxlrg
  ),
  h3: (
    $ms-xlrg,
    $ms-smscr-xlrg
  ),
  h4: (
    $ms-lrg,
    $ms-smscr-lrg
  ),
  h5:  (
    $ms-med,
    $ms-smscr-med
  ),
  h6:  (
    $ms-norm,
    $ms-smscr-norm
  )
);

@each $heading, $size in $headings {
  #{$heading} {
    font-size: nth($size, 2);
  }
}

@include breakpoint($bp-sm) {
  @each $heading, $size in $headings {
    #{$heading} {
      font-size: nth($size, 1);
    }
  }
}