_content-row.scss

.content-row {
	padding: 60px 0;

	@media only screen and (min-width: $large) {
		padding: 120px 0;
	}

	.container>h2 {
		margin: 0 0 10px;
		@include colouredBar($green, $blue);
	}

	.container {
		align-items: center;
	}

	.image-wrapper {
		flex: 0 0 100%;
		margin: 20px 0;
		text-align: center;

		@media only screen and (min-width: $medium) {
			flex: 0 0 35%;
		}

		img {
			display: inline-block;
			width: 100%;
			max-width: 400px;
			mix-blend-mode: multiply;
		}
	}

	.text-wrapper {
		flex: 1;

		// Large introduction text (using blockquote so it can also be set in a WYSIWYG editor field and doesn't require a special field type)
		blockquote,
		blockquote p {
			font-family: $font-header;
			font-size: 24px;
			line-height: 38px;
			margin: 0;

			strong {
				position: relative;
				font-weight: normal;
				@include colouredBar($blue, $lightblue);
				
				&:before, &:after {
					z-index: -2;
					bottom: 5px;
					height: 3px;
				}

				&:after {
					transform: translate(2px,2px);
				}
			}
		}

		.btn {
			background: $blue;
			margin: 40px 0 2px;
			@include colourBg($lightblue, 0deg);
		}
	}

	// Change order on desktop
	@media only screen and (min-width: $medium) {
		&--text_image {
			.text-wrapper {
				margin-right: 5%;
				order: 1;
			}
			.image-wrapper {
				order: 2;
			}
		}

		&--image_text {
			.text-wrapper {
				margin-left: 5%;
			}
		}
	}

	&--blocks {
		background: url('../img/block.svg') 0 0 / 10px 10px repeat;
	}

	&--yellow {
		background: $bg-yellow;
	}

	&--border {
		margin: 0 10px;

		@media only screen and (min-width: $large) {
			padding: 90px 0;
		}

		.container {
			padding: 20px;
			position: relative;
			max-width: 1060px;

			@media only screen and (min-width: $smallmedium) {
				padding: 30px;
			}

			@media only screen and (min-width: $medium) {
				padding: 50px;
			}

			@media only screen and (min-width: $large) {
				max-width: 1020px;
			}

			&:before,
			&:after,
			.border {
				position: absolute;
				content: " ";
				mix-blend-mode: multiply;
				background: $blue;
			}

			.border {
				background: $bg-blue;
				top: 0;
				bottom: 0;
				width: 8px;

				@media only screen and (min-width: $medium) {
					width: 10px;
				}

				&--left {
					left: 0;
				}

				&--right {
					right: 0;
				}
			}

			&:before,
			&:after {
				height: 8px;
				left: 0;
				right: 0;

				@media only screen and (min-width: $medium) {
					height: 10px;
				}
			}

			&:before {
				top: 0;
			}

			&:after {
				bottom: 0;
			}
		}
	}
}

// If this is the first row, make it full height
@media only screen and (min-width: $medium) {
	body.home .content-row[data-index="1"] .container {
		min-height: 65vh;
	}
}