.flex-layout.pk-panel {
	--layout-spacing: max(3rem, calc(6 * var(--su)));
	--hero-overlap: max(7rem, calc(14 * var(--su)));
	padding-block: var(--layout-spacing);
}

.flex-content:has(.flex-layout.hero_banner) + .flex-content .flex-layout.pk-panel,
.flex-layout.hero_banner + .flex-layout.pk-panel {
	/* The banner's aspect ratio determines its desktop height.  Only overlap the
	 * visual itself; using viewport height here made the panel drift vertically. */
	margin-top: calc(-1 * var(--hero-overlap));
	padding-top: 0;
}

.flex-layout.pk-panel .pk-grid-container {
	position: relative;
	z-index: 1;
	padding-block: max(3rem, calc(6 * var(--su)));
	background: var(--panel-bg-color);
}

@media screen and (max-width: 991px) {
	.flex-content:has(.flex-layout.hero_banner) + .flex-content .flex-layout.pk-panel,
	.flex-layout.hero_banner + .flex-layout.pk-panel {
		--hero-overlap: var(--layout-spacing);
	}

	.flex-layout.pk-panel .pk-grid-container {
		padding-inline: max(1.5rem, calc(2.5 * var(--su)));
	}
}

@media screen and (max-width: 767px) {
	.flex-content:has(.flex-layout.hero_banner) + .flex-content .flex-layout.pk-panel,
	.flex-layout.hero_banner + .flex-layout.pk-panel {
		--hero-overlap: var(--layout-spacing);
	}
}