@import '../../../styles/essentials';

.two-columns.padding-0-image-left {
	@include lt {
		padding: 0;
		.column.left {
			padding-right: 0;
		}
		.column.right {
			padding-left: 3em;
		}
	}
}
.two-columns.padding-0-image-right {
	@include lt {
		padding: 0;
		.column.left {
			padding-right: 3em;
		}
		.column.right {
			padding-left: 0;
		}
	}
}

.two-columns {
	overflow: hidden;
	padding: 4em 0;

	&.reverse > .container {
		flex-direction: column-reverse;
		@include lt { flex-direction: row; }
	}

	&.extra-narrow {
		@media (min-width: 768px) {
			.container {
				max-width: calc(768px + 2 * 5em);
			}
		}
	}

	> .container {
		display: flex;
		flex-direction: column;
		@include lt {
			flex-direction: row;
			align-items: center;
		}
		.content-before {
			margin-bottom: 2em;

			@include lt {
				margin-bottom: 0;
			}
		}
		.column {
			h1,h2,h3,h4,h5,h6 {
				margin-block-end: 0.5rem;
				&:first-child {
					margin-block-start: 0;
				}
			}
		}
	}


	&.flex-30-70 .column {
		@include lt {
			flex-basis: 75%;
			&:first-child {
				flex-basis: 25%;
			}
		}
	}

	.column {
		flex-basis: 100%;
		width: 100%;
		@include lt {
			flex-basis: 50%;
			width: 50%;
		}
		.wysiwyg {
			&.flex-start { align-self: flex-start; }
			&+.column.wysiwyg {
				align-self: flex-start;
				@include csmax($large-tablet) {
					padding-top: 0 !important;
				}
			}
		}
		.image {
			align-self: stretch;
			position: relative;
			overflow: visible;

			.background-image {
				display: none;
				background-size: cover;
				background-position: center center;
				width: 50vw;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}

			img {
				opacity: 1!important;
				padding: 0;
				height: 100%;
				width: 100%;
				object-fit: cover;
			}

			&.contain img {
				width: auto;
			}
			&:first-child {
				.background-image { right: 0; left: auto; }
			}
		}
		.video {
			align-self: stretch;
			position: relative;
			overflow: visible;
			padding: 0;
			display: flex;
			align-items: center;

			.video-container {
				height: 0;
				width: 100%;
				padding-bottom: 56.25%;
				position: relative;

				iframe {
					border: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
				}
			}
			&:first-child {
				.background-image { right: 0; left: auto; }
			}
		}
		&.left {
			@include lt {
				padding-right: 1.5em;
			}
		}
		&.right {
			@include lt {
				padding-left: 1.5em;
			}
		}
	}
}

@media (max-width: 1023px) {
	.two-columns {
		> .container {
			row-gap: 1.5rem;
		}
		.column {
			flex-basis: 100% !important;
			width: 100% !important;
		}
	}
}