// Breakpoints

// High-side width for each layout
$bp-small:    767px;
$bp-medium:   767px;
$bp-large:    9999px;
$bp-xlarge:   9999px;

$grid-breakpoints-low: (
  sm: 0, // The first breakpoint needs to be 0 to allow elements to position properly below other breakpoints
  med: $bp-small + 1,
  lg: $bp-medium + 1,
);
$grid-breakpoints-high: (
  sm: $bp-small,
  med: $bp-medium,
  lg: $bp-large,
);

$layout-small: '(min-width : #{0px}) and (max-width : #{$bp-small})';
$layout-medium: '(min-width : #{$bp-small+1}) and (max-width : #{$bp-medium})';
$layout-large: '(min-width : #{$bp-medium+1}) and (max-width : #{$bp-large})';
$layout-xlarge: '(min-width : #{$bp-large+1}) and (max-width : #{$bp-xlarge})';