//////////////////////////////////////////////////////////
// breakpoint variables
//////////////////////////////////////////////////////////

// Small screen
$size-sm: 576px;
$size-sm-min: $size-sm;

// Medium screen
$size-md: 768px;
$size-md-min: $size-md;

// Large screen
$size-lg: 1200px;
$size-lg-min: $size-lg;

// Extra Large screen
$size-xl: 1440px;
$size-xl-min: $size-xl;

// Extra Extra Large screen
$size-xxl: 1920px;
$size-xxl-min: $size-xxl;

// So media queries don't overlap when required, provide a maximum
$size-xs-max: ($size-sm-min - 1);
$size-sm-max: ($size-md-min - 1);
$size-md-max: ($size-lg-min - 1);
$size-lg-max: ($size-xl-min - 1);
$size-xl-max: ($size-xxl-min - 1);