//------------------------------------------------------------------------------------------------
// BREAKPOINTS
//------------------------------------------------------------------------------------------------

/*
Set media query breakpoints which will be used throughout
the rest of the framework.

[1] Can be referenced directly by SASS-MQ to easily generate a media query
[2] Automatically used by certain partials to generate responsive breakpoint
classes (Example: u-margin-bottom-regular@md)
[3] If you need to create a media query for a very specific scenario, instead
of adding a new global media query, just merely pass the PX value to the
SASS-MQ mixin. This avoids unnessasary CSS bloat. See below:

	@include mq(456px) {
		div {
			font-size:72px;
		}
	}

[4] Too add new breakpoints, please see the `set-breakpoints` tool.
*/

$mq-breakpoints: (
	'sm': 375px,
	'sm2': 425px,
	'sm3': 550px,
	'sm4': 650px,
	'md': 768px,
	'md2': 840px,
	'md3': 925px,
	'lg': 1024px,
	'lg2': 1280px,
	'lg3': 1440px
) !default;