/* Make sure to update the docs in breakpoints.md when changing these breakpoints */

/* These breakpoints are designed with a mobile-first approach in mind and `max-width` should be used in special cases only. 
* For more information, please see: 
* https://zellwk.com/blog/how-to-write-mobile-first-css/
* https://github.com/slackero/bootstrap/blob/master/less/variables.less */
/* new breakpoints */
@custom-media --screen-XXS-max (max-width: 639px);

@custom-media --screen-XS-min (min-width: 640px);
@custom-media --screen-XS-max (max-width: 767px);

@custom-media --screen-S-min (min-width: 768px);
@custom-media --screen-S-max (max-width: 1023px);

@custom-media --screen-M-min (min-width: 1024px);
@custom-media --screen-M-max (max-width: 1279px);

@custom-media --screen-L-min (min-width: 1280px);
@custom-media --screen-L-max (max-width: 1339px);

@custom-media --screen-XL-min (min-width: 1440px);
@custom-media --screen-XL-max (max-width: 1979px);

@custom-media --screen-XXL-min (min-width: 1980px);

/* deprecated breakpoints */
@custom-media --small-device (max-width: 825px);
@custom-media --medium-device (min-width: 826px);
@custom-media --large-device (min-width: 1280px);