// Prefix breakpoints with $break- this makes them easier to find with autocomplete.
// Use the 'bp' mixin to use these breakpoints.

$break-mobile-xs: '(max-width: 350px)';
$break-mobile-sm: '(max-width: 400px)';
$break-mobile-lg: '(max-width: 500px)';
$break-tablet: '(max-width: 768px)';
//$break-laptop:  '(max-width: 800px)';
$break-desktop-sm: '(max-width: 1024px)';
$break-desktop-med: '(max-width: 1200px)';
$break-desktop-lrg: '(max-width: 1600px)';
$break-desktop-xlrg: '(min-width: 1800px)';

// Helper to make it easier to print media queries.
@mixin bp($query, $context: all) {
  @media #{$context} and #{$query} {
    @content;
  }
}