// Breakpoints.

$bp-under-xsm: 'max-width: 543px';
$bp-xsm: 544px;
$bp-sm: 768px;
$bp-md: 1024px;
$bp-lg: 1200px;
$bp-xl: 1540px;

// Expects $viewport to either be a number: 200px
// Or a string: 'max-width: 300px'
//
// Usage:
// .foo__bar {
//   margin-left: 16px;
//   margin-right: 16px;

//   @include breakpoint($bp-md) {
//     margin-left: 24px;
//     margin-right: 24px;
//   }
// }
@mixin breakpoint($viewport) {
  @if type-of($viewport) == number {
    @media screen and ( min-width: $viewport ) {
      @content;
    }
  }
  @else {
    @media screen and ( $viewport ) {
      @content;
    }
  }
}