@import '../../stylesheets/variables.scss';
// breakpoints
   
$XXXS:     $screen-xxxs;   
$XXS:     $screen-xxs;   
$XS:     $screen-xs;   
$SM:     $screen-sm;     
$MD:     $screen-md;     
$LG:     $screen-lg;     
$XL:     $screen-xl;     
$XXL:    $screen-xxl;     

// media queries

@mixin MQ($canvas) {
  @if $canvas == xxxs {
   @media only screen and (min-width: $XXXS) { @content; } 
  }
  @else if $canvas == xxs {
   @media only screen and (min-width: $XXS) { @content; } 
  }	
  @else if $canvas == xs {
   @media only screen and (min-width: $XS) { @content; } 
  }
  @else if $canvas == sm {
   @media only screen and (min-width: $SM) { @content; } 
  }
  @else if $canvas == md {
   @media only screen and (min-width: $MD) { @content; } 
  }
  @else if $canvas == lg {
   @media only screen and (min-width: $LG) { @content; } 
  }
  @else if $canvas == xl {
   @media only screen and (min-width: $XL) { @content; } 
  }
  @else if $canvas == xxl {
   @media only screen and (min-width: $XXL) { @content; } 
  }
}