.pixel-section {
	display: flex;
	flex-direction: column;

	@media(min-width: 1281px) {
		min-height: 740px;
	}


	.section-inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
		flex-grow: 1;

		@media(max-width: 1280px) {
			gap: 20px;
		}

		@media(max-width: 767px) {
			grid-template-columns: 1fr;
		}
	}

	.section-col {
		display: flex;
		flex-direction: column;
		padding: 70px 40px;
		position: relative;

		@media(max-width: 1280px) {
			padding: 40px;
		}

		@media(max-width: 1280px) {
			padding: 40px 5%;
		}

		&.section-left-col {
			align-items: flex-end;
			background-color: var(--alternate-section-bg-color);

			&::before {
				content: "";
				width: 220px;
				height: 200px;
				position: absolute;
				left: 0;
				bottom: 40px;
				-webkit-mask-image: url("/wp-content/uploads/vbu_headericon.svg");
				mask-image: url("/wp-content/uploads/vbu_headericon.svg");
				-webkit-mask-size: contain;
				mask-size: contain;
				-webkit-mask-position: center;
				mask-position: center;
				-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
				background-color: rgba(74, 150, 210, 0.4);
			}

			.section-col-inner {	
				@media(min-width: 768px) {
					max-width: 640px;
				}
			}
		}

		&.section-right-col {
			background: linear-gradient(136deg,rgba(50, 158, 211, 1) 0%, rgba(27, 106, 169, 1) 100%);
			
			&.has-image {
				gap: 2.5rem;

				@media(max-width: 1280px) {
					flex-direction: column-reverse;
				}

				@media(min-width: 768px) {
					.section-col-inner {
						max-width: 520px;
					}
				}
			}
		}

		.section-col-inner {
			flex-grow: 1;
			z-index: 2;
		}
	}

	.section-col-background {
		@media(min-width: 1281px) {
			max-width: 540px;
			padding: 20px;
			line-height: 0;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		@media(max-width: 767px) {
			max-width: 400px;
		}
	}

	.headlines {
		h1.headline {
			font-size: 50px;
			font-weight: 300;
			line-height: 1.3em;
			margin-bottom: 6px;
			color: var(--ci-color-main);

			@media(max-width: 1280px) {
				font-size: 30px;
			}
		}

		.subheadline {
			margin-top: 0;
		}

		+ .headlines {
			margin-top: 0;
		}
	}
}

/* gutenberg fix */

.editor-styles-wrapper .pixel-section {
	.section-inner {
		display: block;

		> .block-editor-inner-blocks > .block-editor-block-list__layout {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40px;

			.headline {
				hyphens: auto;
			}

			> .block-editor-block-list__block,
			> .block-editor-block-list__block > .acf-block-component.acf-block-body,
			> .block-editor-block-list__block > .acf-block-component.acf-block-body > div,
			> .block-editor-block-list__block > .acf-block-component.acf-block-body > div > .acf-block-preview,
			> .block-editor-block-list__block > .acf-block-component.acf-block-body > div > .acf-block-preview > .section-right-col {
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				width: 100%;
			}
		}
	}
}