//== Components
//
//## Define common padding and border radius sizes and more. Values based on
//14px text and 1.428 line-height (~20px to start).
$padding-tn-vertical:       1px !default;
$padding-tn-horizontal:     5px !default;


//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to
//different screen sizes.

// Tiny screen / phone
$screen-tn:                  320px !default;
$screen-tn-min:              $screen-tn !default;

// Extra large screen / extra-wide desktop
// Note: Deprecated $screen-xl and $screen-xl-desktop as of v3.0.1
// $screen-xl:                  1620px !default;
// $screen-xl-min:              $screen-xl !default;
// $screen-xl-desktop:          $screen-xl-min !default;

// So media queries don't overlap when required, provide a maximum
// $screen-tn-max:              ($screen-xs-min - 1) !default;
// $screen-lg-max:              ($screen-xl-min - 1) !default;

//== Modals
//
$modal-xl:                    1000px !default;

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Extra small screen/ phone
$container-phone:             ((430px + $grid-gutter-width)) !default;
//** For `$screen-xs-min` and up.
$container-xs:                 $container-phone !default;

// Large screen / wide desktop
$container-xlarge-desktop:      ((1580px + $grid-gutter-width)) !default;
//** For `$screen-lg-min` and up.
$container-xl:                 $container-xlarge-desktop !default;
