// ============================================================================
// :: SETTINGS
// ============================================================================

%_split-col-1 {
	width: 100% / 12;
}

%_split-col-2 {
	width: 100% / 6;
}

%_split-col-3 {
	width: 100% / 4;
}

%_split-col-4 {
	width: 33.3%;
}

%_split-col-5 {
	width: 100% / 12 * 5;
}

%_split-col-6 {
	width: 49.9%;
}

%_split-col-7 {
	width: 100% / 12 * 7;
}

%_split-col-8 {
	width: 66.5%;
}

%_split-col-9 {
	width: 100% / 12 * 9;
}

%_split-col-10 {
	width: 100% / 12 * 10;
}

%_split-col-11 {
	width: 100% / 12 * 11;
}

%_split-col-12 {
	width: 100%;
}

// ============================================================================
// :: SPLIT
// ============================================================================
.l-split {

	> .l-container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		// this is stretched so that the image it fully stretched to the bottom when
		// splitting content
		align-items: stretch;
		width: 100%;

		@include respond-at($screen-small-base) {
			flex-direction: row;
		}
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.l-split__content {
	padding: 4rem 2rem;

	@include respond-at($screen-medium-base) {
		padding: 10rem 5rem;
	}
}

.l-split__image {
	overflow: hidden;

	@include respond-to($screen-small-base) {
		order: -1;
		height: 12.5rem;
	}
}

.l-split__video {

	@include respond-to($screen-small-base) {
		height: 44rem;
	}
}

.l-split__content {
	@include respond-to($screen-small-base) {
		order: 2;
	}
}

@for $i from 1 through 12 {

	[class*="l-split__col-#{$i}-12"] {
		@extend %_split-col-#{$i};

		@include respond-to($screen-medium-base) {
			width: 50%;
		}

		@include respond-to($screen-small-base) {
			width: 100%;
		}
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.l-split--center {

	> .l-container {
		align-items: center;
	}
}

.l-split__image--large {
	@include respond-to($screen-small-base) {
		order: -1;
		height: 25rem;
	}
}

.l-split__content--center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	text-align: center;
}