$o-text-image-bp1: m;
$o-text-image-bp2: l;


.o-text-image {
	@include contain;
	position: relative;

	@include mq($o-text-image-bp1) {
		display: flex;
	}
}


.o-text-image__description {
	margin-bottom: space(5);

	@include mq($o-text-image-bp1){
		width: column(6);
		margin-bottom: 0; // reset
	}
}


.o-text-image__visual {
	@include mq($o-text-image-bp1) {
		width: column(5);
		margin-left: column(1);
	}
}


// Modifier for reversing: Image first, then text
.o-text-image--is-reversed {
	@include mq($o-text-image-bp1) {
		flex-direction: row-reverse;
	}

	.o-text-image__visual {
		@include mq($o-text-image-bp1) {
			margin-left: 0; // reset
			margin-right: column(1);
		}
	}
}