//------------------------------------------------------------------------------------------------
// CONTAINER BREAKOUT
//------------------------------------------------------------------------------------------------

/*
Breaks out of containers width to go full width of the viewport.
*/

// CLASSES
//------------------------------------------------------------------------------------------------

.u-breakout {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	border-left-width: 0 !important;
	border-right-width: 0 !important;
}

// Example: u-breakout@max-md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq($until: #{$bp-name}) {
		.u-breakout\@max-#{$bp-name} {
			width: 100vw !important;
			position: relative !important;
			left: 50% !important;
			right: 50% !important;
			margin-left: -50vw !important;
			margin-right: -50vw !important;
			border-left-width: 0 !important;
			border-right-width: 0 !important;
		}
	}
}