// Grid Variables
$viewport-min-width: 1200px;
$grid-columns: 12;
$grid-gutter-md-width: 24px;
$grid-gutter-width: 24px;
$viewport-margin: 12px;

@if $bootstrap3 == true {
    $grid-columns: 12;
    $grid-gutter-md-width: 24px;
    $grid-gutter-width: 24px;
    $viewport-margin: 12px;
}

// Grid
$grid-xs-initials: "xs";
$grid-xs-margin-optical: 8px;
$grid-xs-margin: 4px;
$grid-xs-gutters: 8px;
$grid-xs-width: $screen-xs - $grid-xs-margin-optical * 2;
$grid-xs-screen: ($grid-xs-margin * 2) + $grid-xs-width;

// Grid
$grid-xs-transitional-initials: "xs-transitional";
$grid-xs-transitional-screen: $screen-xs-transitional;
$grid-xs-transitional-margin-optical: 8px;
$grid-xs-transitional-width: $grid-xs-transitional-screen - $grid-xs-transitional-margin-optical * 2;
$grid-xs-transitional-margin: 4px;
$grid-xs-transitional-gutters: 8px;

// Grid
$grid-sm-initials: "sm";
$grid-sm-margin-optical: 24px;
$grid-sm-margin: 6px;
$grid-sm-gutters: 24px;
// $grid-sm-screen: $screen-sm;
// $grid-sm-width: $grid-sm-screen - $grid-sm-margin-optical * 2;
$grid-sm-width: $screen-sm - ($grid-sm-margin-optical * 2);
// $grid-sm-screen: ($grid-sm-margin * 2) + $grid-sm-width;
$grid-sm-screen: $screen-sm;

// Grid
$grid-md-initials: "md";
$grid-md-margin-optical: 20px;
$grid-md-margin: 12px;
$grid-md-gutters: 24px;
$grid-md-width: $screen-md - ($grid-md-margin-optical * 2);
// $grid-md-screen: ($grid-md-margin * 2) + $grid-md-width;
$grid-md-screen: $screen-md;

// Grid
$grid-lg-initials: "lg";
$grid-lg-margin-optical: 76px;
$grid-lg-margin: 12px;
$grid-lg-gutters: 24px;
$grid-lg-width: $screen-lg - ($grid-lg-margin-optical * 2);
// $grid-lg-screen: ($grid-lg-margin * 2) + $grid-lg-width;
$grid-lg-screen: $screen-lg;

// Grid
$grid-xl-initials: "xl";
$grid-xl-margin-optical: 18px;
$grid-xl-margin: 8px;
$grid-xl-gutters: 36px;
$grid-xl-width: $screen-xl - ($grid-xl-margin-optical * 2);
// $grid-xl-screen: ($grid-xl-margin * 2) + $grid-xl-width;
$grid-xl-screen: $screen-xl;

/*-- Breakpoints --*/

// Transitional Extra Small to large phone;
$breakpoint-xs: $grid-xs-screen;
$breakpoint-xs-transitional: $grid-xs-transitional-screen;
$breakpoint-sm: $grid-sm-screen;
$breakpoint-md: $grid-md-screen;
$breakpoint-lg: $grid-lg-screen;
$breakpoint-xl: $grid-xl-screen;