@mixin query($bp, $computer_first: false) {
  @if $computer_first == true {
    @if map-has-key($breakpoint-reverse, $bp) {
      $bp-value: map-get($breakpoint-reverse, $bp);

      @media (max-width: $bp-value) {
        @content;
      }
    } @else {
      @warn 'Invalid breakpoint: #{$bp}';
    }
  } @else {
    @if map-has-key($breakpoint, $bp) {
      $bp-value: map-get($breakpoint, $bp);

      @media (min-width: $bp-value) {
        @content;
      }
    } @else {
      @warn 'Invalid breakpoint: #{$bp}';
    }
  }
}
