@mixin breakpoint-up($size) {
  @media screen and (min-width: #{map-get($breakpoints, $size)}) {
    @content;
  }
}

@mixin breakpoint-down($size) {
  @media screen and (max-width: #{map-get($breakpoints, $size) - 1}) {
    @content;
  }
}

@mixin breakpoint-between($min, $max) {
  @media screen
    and (min-width: #{map-get($breakpoints, $min)})
    and (max-width: #{map-get($breakpoints, $max) - 1}) {
      @content;
  }
}