// Component settings: Intro
// ------------------------------------------

$o-intro: (
	'bgcolor':				palette(primary, 700),
	'bgcolor-alt':			palette(primary, 500),
);

// ------------------------------------------


.o-intro {
	position: relative;
	z-index: 0;

	&.is-intro-alt {
		@include vspacing(
				'margin-bottom' 1
		);
	}
}

.o-intro__header {
	.is-intro-alt & {
		background-color: map-get($o-intro, 'bgcolor-alt');
	}
}

.o-intro__body {
	position: relative;

	@include vspacing(
		'margin-bottom' 1
	);

	@include mq(m) {
		.is-intro-alt & {
			background-color: map-get($o-intro, 'bgcolor-alt');
		}
	}
}

.o-intro__main {
	@include mq($max: m) {
		.o-intro--mobile-break-out & {
			width: 100vw;
			margin-left: 50%;
			transform: translateX(-50%);
		}
	}

	@include mq(m) {
		&::before {
			content: '';
			position: absolute;
			z-index: 0;
			top: 50%;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: map-get($o-intro, 'bgcolor');
		}
	}
}