// Minima of each width category
$viewport-width-tiny: 375;
$viewport-width-small: 768;
$viewport-width-medium: 992;
$viewport-width-large: 1200;
$viewport-width-xlarge: 1680;

// Maxima of each width category
$viewport-width-extra-small-max: $viewport-width-small - 1;
$viewport-width-small-max: $viewport-width-medium - 1;
$viewport-width-medium-max: $viewport-width-large - 1;
$viewport-width-large-max: $viewport-width-xlarge - 1;

// Strings usable directly after '@media'
$media-tiny: "(max-width: #{$viewport-width-tiny}px)";
$media-extra-small: "(max-width: #{$viewport-width-extra-small-max}px)";
$media-small-plus: "(min-width: #{$viewport-width-small}px)";
$media-small-minus: "(max-width: #{$viewport-width-small-max}px)";
$media-small: "#{$media-small-plus} and #{$media-small-minus}";
$media-medium-plus: "(min-width: #{$viewport-width-medium}px)";
$media-medium-minus: "(max-width: #{$viewport-width-medium-max}px)";
$media-medium: "#{$media-medium-plus} and #{$media-medium-minus}";
$media-large-plus: "(min-width: #{$viewport-width-large}px)";
$media-large-minus: "(max-width: #{$viewport-width-large-max}px)";
$media-large: "#{$media-large-plus} and #{$media-large-minus}";
$media-xlarge: "(min-width: #{$viewport-width-xlarge}px)";