Update to @jina's media query Sass mixin for headings to include an overall single base size and percentage increases for different breakpoints

my-media-queries.scss

$medium-width:    48em;
$large-width:     62em;

// Base heading sizes
$heading-base:    1.5em;

// ---------------------
// _headings.sass

// Small Default
h1 { font-size: $heading-base; // 1.5em }
h2 { font-size: $heading-base / 1.2; // 1.25em }
h3 { font-size: $heading-base / 1.33333333; // 1.125em }

// Medium-sized Screens
@mixin headings-medium {
  h1 { font-size: $heading-base * 1.16666667 // 1.75em }
  h2 { font-size: $heading-base // 1.5em }
  h3 { font-size: $heading-base / 1.2; // 1.25em }
}

// Large-sized Screens    
@mixin headings-large {
  h1 { font-size: $heading-base * 1.33333333 // 2em }
  h2 { font-size: $heading-base * 1.16666667 // 1.75em }
  h3 { font-size: $heading-base // 1.5em }
}



// ---------------------
// _layout.sass

// Small Default
body {
  margin: 0;
  padding: 0 2em;
}

// Medium-sized Screens
@mixin layout-large {
  body { padding: 0; }
  .content-primary,
  .content-secondary { float: left; }
  .content-primary   { width: 75%; }
  .content-secondary { width: 25%; }
}



// ---------------------
// _responsive.sass

@mixin at-breakpoint($breakpoint-width) {
  @media only screen and (max-width: $large-width) {
    @content;
  }
}

@include at-breakpoint($medium-width) {
  @include headings-medium;
}

@media only screen and (max-width: $large-width) {
  @include headings-large;
  @include layout-large;
}