content/assets/stylesheets/mixins/_breakpoints.scss

@use "sass:meta" as *;
@use "../variables" as *;

// Breakpoints

// @include breakpoint(sm) {};
@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);

  @if $type == string {

    @if $min == xs { // < 544px
      @media only screen and (max-width: $bp-xs) { @content; }
    } @else if $min == sm { // > 544px
      @media only screen and (min-width: $bp-sm) { @content; }
    } @else if $min == md { // > 768px
      @media only screen and (min-width: $bp-md) { @content; }
    } @else if $min == lg { // > 992px
      @media only screen and (min-width: $bp-lg) { @content; }
    } @else if $min == xl { // > 1200px
      @media only screen and (min-width: $bp-xl) { @content; }
    } @else if $min == 2x {
      @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
        only screen and (min--moz-device-pixel-ratio: 1.5),
        only screen and (min-device-pixel-ratio: 1.5) { @content; }
    } @else {
      @warn 'Breakpoint mixin supports: xs, sm, md, lg, xl, 2x';
    }
  } @else if $type == number {
    // Allow for custom parameters for min and max size
    $query: 'all' !default;
    @if      $min != 0 and $max != 0 { $query: 'only screen and (min-width: #{$min}) and (max-width: #{$max})'; } // set both min and max
    @else if $min != 0 and $max == 0 { $query: 'only screen and (min-width: #{$min})'; } // set just min
    @else if $min == 0 and $max != 0 { $query: 'only screen and (max-width: #{$max})'; } // set just max
    @media #{$query} { @content; }
  }
}