/*===============================================================================
 * Double layout in 2 equal columns
 *
 * Until viewport is wide enough the columns are stacked vertically
 * ============================================================================== */


.o-double-text {
	position: relative;
	background-color: palette(neutral, 0);
	height: 100%; // stretch it out in its container

	// Set side by side from medium viewports and up
	@include mq(m) {
		display: flex;
	}
}


.o-double-text__column {

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

	&:first-child {
		@include mq(m, l) {
			width: column(5, 8);
			padding-right: column(1, 8);
		}
		@include mq(l) {
			padding-left: column(1, 12);
		}
	}

	&:last-child {
		// Create vertical spacing on mobile
		@include vspacing-s(
			'margin-top' 0.5
		);
		@include mq(m, l) {
			width: column(3, 8);
		}
		@include mq(l) {
			padding-left: column(1, 12);
			padding-right: column(1, 12);
		}
	}
}