$o-text-image-bp1: 1000;
$o-text-image-v-padding: space(6);
$o-text-image-bottom-padding-large: space(18);

.o-text-image {
	position: relative;
	display: grid;
	grid-template-rows: auto $o-text-image-v-padding auto;
	grid-template-columns: minmax(#{columnVw(1,14), 1fr}) minmax(0, #{$site-max-width * 1px}) minmax(#{columnVw(1,14), 1fr});
	margin-top: space(9);

	@include mq($o-text-image-bp1) {
		grid-template-rows: 1fr auto 1fr;
		grid-template-columns: minmax(#{columnVw(1,14), 1fr}) repeat(2, minmax(0, #{$site-max-width/2 * 1px})) minmax(#{columnVw(1,14), 1fr});
		background-image: linear-gradient(to bottom, transparent 50%, #{palette(primary, 600)} 50%);
		padding-bottom: $o-text-image-bottom-padding-large / 2;
	}

	&:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 50%;
		height: space(6);
		width: 1px;
		background-color: palette(neutral, 0);
		transform: translateY(50%);

		@include mq($o-text-image-bp1) {
			height: $o-text-image-bottom-padding-large;
			bottom: $o-text-image-bottom-padding-large / 2;
		};
	}
}


.o-text-image__visual {
	grid-column: 2 / 4;
	grid-row: 1 / 3;

	@include mq($o-text-image-bp1) {
		grid-column: 2 / 5;
		grid-row: 1 / 4;
	}
}


.o-text-image__description {
	@include font-weight(light);
	grid-column: 2 / 3;
	grid-row: 2 / 4;
	position: relative;
	z-index: 1;
	color: palette(neutral, 0);
	padding-top: $o-text-image-v-padding;
	padding-bottom: $o-text-image-v-padding;
	padding-right: space(3);

	@include mq($o-text-image-bp1) {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
		padding-top: space(9);
		padding-bottom: space(9);
		padding-right: space(13);
	}

	&::before {
	    content: '';
		position: absolute;
		z-index: -1;
	    top: 0;
	    bottom: 0;
	    right: 0;
	    left: -50vw;
		background-color: palette(primary, 500);
	}
}