// //== 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;
