// Grid
$grid-columns: 12 !default; // Set number of columns in the grid

// smallest to largest
$breakpoints-max: (
    'xs': 640,
    'sm': 990,
    'md': 1280,
    'lg': 1440,
    'xl': 1920,
) !default;

$xs-max: '#{map-get($breakpoints-max, 'xs')}px' !default; // Set xs breakpoint's max width
$sm-max: '#{map-get($breakpoints-max, 'sm')}px' !default; // Set sm breakpoint's max width
$md-max: '#{map-get($breakpoints-max, 'md')}px' !default; // Set md breakpoint's max width
$lg-max: '#{map-get($breakpoints-max, 'xl')}px' !default; // Set lg breakpoint's max width

$gutter: 0 !default;

$sm-start: '#{map-get($breakpoints-max, 'xs') + 1}px' !default; // Set sm breakpoint's min width
$md-start: '#{map-get($breakpoints-max, 'sm') + 1}px' !default; // Set md breakpoint's min width
$lg-start: '#{map-get($breakpoints-max, 'md') + 1}px' !default; // Set lg breakpoint's min width
$xl-start: '#{map-get($breakpoints-max, 'xl') + 1}px' !default; // Set xl breakpoint's min width

$content-well-max-width: 'none' !default; // Set the max-width of the content well

// Breakpoints
// Create breakpoint range statements to be used in media queries
$breakpoint-xs-up: 'only screen' !default;
$breakpoint-xs-only: 'only screen and (max-width: #{$xs-max})' !default; // 0 -> xs-max range
$breakpoint-sm-up: 'only screen and (min-width: #{$sm-start})' !default; // sm-start -> up range
$breakpoint-sm-only: 'only screen and (min-width: #{$sm-start}) and (max-width: #{$sm-max})' !default; // sm-start -> sm-max range
$breakpoint-md-up: 'only screen and (min-width: #{$md-start})' !default; // md-start -> up range
$breakpoint-md-only: 'only screen and (min-width: #{$md-start}) and (max-width: #{$md-max})' !default; // md-start -> md-max range
$breakpoint-lg-up: 'only screen and (min-width: #{$lg-start})' !default; // lg-start -> up range
$breakpoint-lg-only: 'only screen and (min-width: #{$lg-start}) and (max-width: #{$lg-max})' !default; // lg-start -> lg-max range
$breakpoint-xl-up: 'only screen and (min-width: #{$xl-start})' !default; // xl-start -> up range

$breakpoint-sm-down: 'only screen and (max-width: #{$sm-max})' !default; // sm -> down
$breakpoint-md-down: 'only screen and (max-width: #{$md-max})' !default; // md -> down
$breakpoint-lg-down: 'only screen and (max-width: #{$lg-max})' !default; // lg -> down

$breakpoints-all: (
    $breakpoint-xs-only,
    $breakpoint-sm-up,
    $breakpoint-sm-only,
    $breakpoint-md-up,
    $breakpoint-md-only,
    $breakpoint-lg-up,
    $breakpoint-lg-only,
    $breakpoint-xl-up
) !default;
$breakpoint-ups: (
    $breakpoint-sm-up,
    $breakpoint-md-up,
    $breakpoint-lg-up,
    $breakpoint-xl-up
) !default;
$breakpoint-all-prefixes: (
    'xs',
    'xs-only',
    'sm',
    'sm-only',
    'md',
    'md-only',
    'lg',
    'lg-only',
    'xl'
) !default;
$breakpoint-up-prefixes: ('xs', 'sm', 'md', 'lg', 'xl') !default;

$breakpoints: (
    'xs': $breakpoint-xs-up,
    'xs-only': $breakpoint-xs-only,
    'sm': $breakpoint-sm-up,
    'sm-only': $breakpoint-sm-only,
    'sm-down': $breakpoint-sm-down,
    'md': $breakpoint-md-up,
    'md-only': $breakpoint-md-only,
    'md-down': $breakpoint-md-down,
    'lg': $breakpoint-lg-up,
    'lg-only': $breakpoint-lg-only,
    'lg-down': $breakpoint-lg-down,
    'xl': $breakpoint-xl-up,
) !default;

body {
    &::before {
        display: block;
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
    }

    &::after {
        display: block;
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
    }
}