// ============================================================================
// :: Aside
// ============================================================================
.l-aside {
	position: relative;

	z-index: $z-index-highest;

	margin-top: -20.8rem;
	margin-bottom: 11rem;

	background-color: $background-color-white;
	box-shadow: $box-shadow;
}

// ============================================================================
// :: Components
// ============================================================================
.l-aside__container {
	grid-auto-rows: 20.8rem 1fr auto;
	display: grid;
	display: -ms-grid;
	-ms-grid-rows: 20.8rem auto auto;

	@include respond-at($screen-medium-base) {
		grid-auto-flow: dense;
		grid-auto-rows: 20.8rem 1fr 1fr;
		grid-template-columns: repeat(7, 1fr);
		display: grid;
		display: -ms-grid;

		width: 100%;
		-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		-ms-grid-rows: 20.8rem auto auto;
	}
}

.l-aside__highlight {

	-ms-grid-row: 1;
	grid-row: 1 / span 1;
	display: flex;

	background-color: $background-color-grey-extra-light;

	background-color: $primary-color;
	-ms-grid-row-span: 1;

	> * {
		height: 100%;
	}
}

.l-aside-seperator {
	display: flex;
	align-items: center;

	background-color: $primary-color;

	.l-aside-seperator__line {
		width: 1.5rem;
		height: 0.3rem;

		background-color: $background-color-grey-extra-light;
	}
}

.l-aside__highlight,
.l-aside__info {

	-ms-grid-column: 1;

	grid-column: 1 / span 2;
	width: 100%;
	-ms-grid-column-span: 2;
}

.l-aside__content {
	padding: 3rem;

	@include respond-at($screen-medium-base) {
		-ms-grid-column: 3;

		grid-column: 3 / span 5;

		-ms-grid-row: 1;
		grid-row: 1 / span 3;
		padding: 6rem;

		-ms-grid-column-span: 5;
		-ms-grid-row-span: 3;
	}
}

.l-aside__highlight-image {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.l-aside__header {
	margin-bottom: 3rem;
}

.l-aside__title {
	font-family: $font-family-beausans;
	font-weight: $font-weight-ultrathin;
	font-size: $font-size-4x-large;
	line-height: $line-height-5x-large;

	color: $text-color;

	@include respond-to($screen-small-base) {
		font-size: $font-size-3x-large;
		line-height: $line-height-4x-large;
	}
}

.l-aside__intro {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;

	font-weight: $font-weight-normal;
}

.l-aside__form {
	margin-top: 2rem;
}

.l-aside__info {
	padding: 3rem;

	background-color: $background-color-grey-extra-light;

	@include respond-at($screen-medium-base) {

		-ms-grid-row: 1;

		grid-row: 1 / span 3;
		padding: 4rem;
		-ms-grid-row-span: 3;
	}
}

.l-aside__info-section {

	+ .l-aside__info-section {
		margin-top: 2rem;
	}
}

.l-aside__content-item {

	+ .l-aside__content-item {
		margin-top: 4rem;
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.l-aside--with-highlight {

	.l-aside__info {

		@include respond-at($screen-medium-base) {

			-ms-grid-row: 2;

			grid-row: 2 / span 2;
			padding: 4rem;
			-ms-grid-row-span: 2;
		}
	}
}

.l-aside--reverse {

	@include respond-at($screen-medium-base) {
		grid-auto-rows: 1fr 1fr 20.8rem;
		-ms-grid-rows: auto auto 20.8rem;
	}

	.l-aside__info,
	.l-aside__highlight {

		@include respond-at($screen-medium-base) {
			grid-column: 6 / span 2;

			-ms-grid-column-span: 2;

			-ms-grid-column: 6;
		}
	}

	.l-aside__content {

		@include respond-at($screen-medium-base) {
			-ms-grid-column: 1;
			grid-column: 1 / span 5;

			-ms-grid-row: 1;
			grid-row: 1 / span 3;

			-ms-grid-column-span: 5;
			-ms-grid-row-span: 3;
		}
	}
}

.l-aside--large-highlight {

	.l-aside__container {
		@include respond-at($screen-medium-base) {
			grid-auto-rows: 36rem 1fr 1fr;
			-ms-grid-rows: 36rem auto auto;
		}
	}

	.l-aside__info {
		display: none;

		@include respond-at($screen-medium-base) {
			display: block;
		}
	}
}