@mixin breakpoint-down($name: md, $breakpoints: $grid-breakpoints) {
  $map: map-get($breakpoints, $name);
  @media (max-width: $map) {
    @content;
  }
}

@mixin breakpoint-up($name: md, $breakpoints: $grid-breakpoints) {
  $map: map-get($breakpoints, $name);
  @media (min-width: $map + 1px) {
    @content;
  }
}

@mixin breakpoint-retina {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    @content;
  }
}