$breakpoint-xs: 400px;
$breakpoint-sm: 650px;
$breakpoint-md: 960px;
$breakpoint-lg: 1440px;
$breakpoint-xl: 1920px;

@mixin screen($size, $type: max, $pixels: $breakpoint-sm) {
  @if $size == 'xs' {
    @media screen and ($type + -width: $breakpoint-xs) {
        @content;
    }
  }
  @if $size == 'sm' {
    @media screen and ($type + -width: $breakpoint-sm) {
        @content;
    }
  }
  @else if $size == 'md' {
    @media screen and ($type + -width: $breakpoint-md) {
        @content;
    }
  }
  @else if $size == 'lg' {
    @media screen and ($type + -width: $breakpoint-lg) {
        @content;
    }
  }
  @else if $size == 'xl' {
    @media screen and ($type + -width: $breakpoint-xl) {
        @content;
    }
  }
  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }
  @else {
    @content;
  }
}