@mixin media-breakpoint-down($name, $breakpoints: default) {
  @if $breakpoints == default {
    $breakpoints: $responsive;
  }
  @media (max-width: map-get($breakpoints, $name) - 1) {
    @content;
  }
}

@mixin media-breakpoint-up($name, $breakpoints: default) {
  @if $breakpoints == default {
    $breakpoints: $responsive;
  }
  @media (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}