.wp-block-crunchr-two-column-header.crunchr-two-column-header {
	--crunchr-header-gutter: max(
		var(--wp--style--root--padding-right, 20px),
		calc((100cqw - 1440px) / 2)
	);
	position: relative;
	left: 50%;
	isolation: isolate;
	box-sizing: border-box;
	width: 100cqw;
	max-width: 100cqw !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	overflow: hidden;
	background: var(--wp--preset--color--neutral-50, #f2f4f7);
	transform: translateX(-50%);
}

.wp-block-crunchr-two-column-header.crunchr-two-column-header::before,
.wp-block-crunchr-two-column-header.crunchr-two-column-header::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	content: "";
}

.wp-block-crunchr-two-column-header.crunchr-two-column-header::before {
	z-index: 0;
	background-image:
		linear-gradient(rgba(127, 140, 164, .22) 1px, transparent 1px),
		linear-gradient(90deg, rgba(127, 140, 164, .22) 1px, transparent 1px);
	background-position:
		calc(100% - var(--crunchr-header-gutter)) 0,
		calc(100% - var(--crunchr-header-gutter)) 0;
	background-size: 180px 180px;
	-webkit-mask-image:
		linear-gradient(
			to bottom,
			transparent 0%,
			rgba(0, 0, 0, .08) 10%,
			rgba(0, 0, 0, .62) 24%,
			#000 36%,
			#000 64%,
			rgba(0, 0, 0, .62) 76%,
			rgba(0, 0, 0, .08) 90%,
			transparent 100%
		),
		radial-gradient(
			ellipse 58% 82% at calc(50% + min(25vw, 360px)) 50%,
			#000 0%,
			#000 48%,
			transparent 100%
		);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(
			to bottom,
			transparent 0%,
			rgba(0, 0, 0, .08) 10%,
			rgba(0, 0, 0, .62) 24%,
			#000 36%,
			#000 64%,
			rgba(0, 0, 0, .62) 76%,
			rgba(0, 0, 0, .08) 90%,
			transparent 100%
		),
		radial-gradient(
			ellipse 58% 82% at calc(50% + min(25vw, 360px)) 50%,
			#000 0%,
			#000 48%,
			transparent 100%
		);
	mask-composite: intersect;
}

.wp-block-crunchr-two-column-header.crunchr-two-column-header::after {
	display: none;
}

.crunchr-two-column-header__inner {
	--crunchr-two-column-header-top-padding: max(
		160px,
		calc(var(--crunchr-header-height, 80px) + 72px)
	);
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--crunchr-header-gutter))), 1440px);
	margin-inline: auto;
	padding-top: var(--crunchr-two-column-header-top-padding);
	padding-bottom: var(--wp--preset--spacing--110, 80px);
}

.crunchr-two-column-header__columns {
	position: relative;
	overflow: visible !important;
	margin-block: 0;
}

.crunchr-two-column-header__columns > .wp-block-column:last-child {
	position: relative;
	overflow: visible !important;
}

/* Transparent 1.5x Figma export, rendered slightly below its 1313 × 788 footprint
 * and centred behind the right panel. */
.crunchr-two-column-header__columns > .wp-block-column:last-child::before {
	position: absolute;
	z-index: 0;
	top: calc(-1 * var(--crunchr-two-column-header-top-padding));
	bottom: calc(-1 * var(--wp--preset--spacing--110, 80px));
	left: 50%;
	width: 1155px;
	pointer-events: none;
	background: url("../../icons/Ellipse.png") center / 1155px 100% no-repeat;
	transform: translateX(-50%);
	content: "";
}

.crunchr-two-column-header__panel {
	position: relative;
	z-index: 1;
	min-height: 240px;
	padding: clamp(28px, 4vw, 64px);
}

.editor-styles-wrapper .crunchr-two-column-header__inner {
	min-height: 240px;
}

@media (max-width: 781px) {
	.wp-block-crunchr-two-column-header.crunchr-two-column-header {
		--crunchr-header-gutter: var(--wp--style--root--padding-right, 20px);
	}

	.wp-block-crunchr-two-column-header.crunchr-two-column-header::before {
		background-size: 96px 96px;
		-webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
		mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
	}

	.crunchr-two-column-header__inner {
		--crunchr-two-column-header-top-padding: max(
			152px,
			calc(var(--crunchr-header-height, 64px) + 64px)
		);
	}

	.crunchr-two-column-header__columns > .wp-block-column {
		position: relative;
		z-index: 1;
	}

	.crunchr-two-column-header__columns > .wp-block-column:last-child::before {
		display: block;
		top: -80px;
		bottom: -80px;
		width: min(1180px, 260vw);
		height: auto;
		background: url("../../icons/Ellipse.png") center / 100% 100% no-repeat;
		-webkit-mask-image: none;
		mask-image: none;
		transform: translateX(-50%);
	}

}