/**
 * TWO-COLUMN IMAGE AND TEXT STYLES
 */

.two-column-image-text {
	background-color: var(--cis-milk);
	color: var(--cis-avocado);
	padding: 0;
}

.two-column-image-text__inner {
	display: flex;
	flex-direction: column;
}

.two-column-image-text__inner.image-right {
	flex-direction: column-reverse;
}

.two-column-image-text__content {
	padding: 75px 0 48px;
}

.two-column-image-text__title {
	font-size: 50px;
	font-family: var(--font-alt);
	text-transform: uppercase;
	color: var(--cis-avocado);
	font-weight: 700;
	line-height: 0.9;
	margin-top: 0;
	margin-bottom: 43px;
}

.two-column-image-text__text p:last-of-type {
	margin-bottom: 0;
}

.two-column-image-text__image-wrapper {
	flex: 0 1 50%;
}

.two-column-image-text__image-wrapper img {
	max-height: initial;
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 550px) {
	.two-column-image-text__title {
		font-size: 60px;
	}
}

@media screen and (max-width: 799px) {
	.two-column-image-text__image-wrapper {
		margin-top: 0;
		margin-left: -32px;
		margin-right: -32px;
		max-width: calc(100% + 64px);
		aspect-ratio: 1 / 1.1;
		max-height: 600px;
	}
}

@media screen and (min-width: 800px) {
	.two-column-image-text .two-column-image-text__inner {
		flex-direction: row;
		margin-left: -32px;
		margin-right: -32px;
	}

	.two-column-image-text__content {
		flex: 1 1 50%;
		max-width: 53%;
		padding: 48px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.two-column-image-text__text {
		max-width: 560px;
	}

	.image-right .two-column-image-text__content {
		padding-left: 32px;
		padding-right: 40px;
	}

	.image-left .two-column-image-text__content {
		padding-left: 40px;
		padding-right: 32px;
	}

	.two-column-image-text__image-wrapper {
		flex: 0 1 50%;
	}
}

@media screen and (min-width: 1200px) {
	.two-column-image-text__title {
		font-size: 90px;
		margin-bottom: 38px;
	}

	.two-column-image-text__inner {
		min-height: 600px;
	}

	.image-right .two-column-image-text__content {
		padding-left: 115px;
	}

	.image-right .two-column-image-text__content {
		padding-left: 115px;
	}
}