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


.o-intro {
	position: relative;
	z-index: 0;
	background-color: map-get($site-intro, 'bgColor');

	// When intro is darker then body we need to add extra margin
	@if map-get($site-intro, 'isDark'){
		@include vspacing(
			'margin-bottom' 1
		);
	}
}


.o-intro__body {
	position: relative;

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

	@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($site-intro, 'barColor');
		}
	}
}


.o-intro__content {
	background-color: palette(neutral, 0);
	position: relative;

	@include mq(m) {
		display: flex;
	}

	@include mq(l) {
		width: calc((100% / #{$site-columns-l + 2}) * #{$site-columns-l});
		max-width: #{$site-max-width}px;
		margin-left: auto;
		margin-right: auto;
	}
}


.o-intro__nav,
.o-intro__image {
	margin-top: space(4);

	@include mq(m) {
		order: -1;
		width: column(5,12);
		margin-top: 0;
	}

	@include mq(l) {
		width: column(6,12);
	}
}


.o-intro__nav {
	background-color: map-get($site-intro, 'subnavBgColor');
	padding: space(4) $site-gutter-width;

	@include mq(m) {
		padding: space(10) column(0.5,12);
		padding-left: percentage(1 / (8 + 2));
	}

	@include mq(l) {
		padding-left: percentage(1 / (10 + 2));
		padding-right: percentage(1 / (10 + 2));
	}
}


.o-intro__text {
	padding-top: space(4);
	padding-left: $site-gutter-width;
	padding-right: $site-gutter-width;

	@include mq(m) {
		width: column(7,12);
		padding: space(10) column(1,12);
	}

	@include mq(l) {
		width: column(6,12);
	}
}


.o-intro__title,
.o-intro__heading {
	color: map-get($site-intro, 'color') !important;
}


.o-intro__button {
	color: map-get($site-intro, 'linkColor') !important;
}