/* stylelint-disable unit-disallowed-list */
// To enable support for browsers that do not support @media queries,
// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
// Create a separate stylesheet served exclusively to these browsers,
// meaning @media queries will be rasterized, relying on the cascade itself
$mq-responsive: true;

// Name your breakpoints in a way that creates a ubiquitous language
// across team members. It will improve communication between
// stakeholders, designers, developers, and testers.
/* stylelint-disable value-keyword-case */
$mq-breakpoints: (
	zero: 1px,
	// $mq complains if 0 is used WITHOUT units. style-lint complains if 0 is used WITH units. compromise.
		mobile: 321px,
	tablet: 769px,
	desktop: 980px,
	wide: 1300px,
	mobileL: 425px,
	mobileM: 275px,
	mobileS: 320px,
	desktopAd: 810px,
	mobileLandscape: 480px
);

// If you want to display the currently active breakpoint in the top
// right corner of your site during development, add the breakpoints
// to this list, ordered by width. For example: (mobile, tablet, desktop).
// $mq-show-breakpoints: (mobile, mobileLandscape, tablet, desktop, wide);

// With webpack (and boilerplates such as create-react-app)
@import 'sass-mq';