.flex-layout.hero_submenu {
	--bg-color: var(--neutral-90);
	--text-color: var(--primary-100);
	--layout-spacing-top: max(1rem, calc(1.5 * var(--su)));
	--layout-spacing-bottom: 0px;
	--overlay-height: max(4.5rem, calc(4.5 * var(--su)));
}

/* Kaart zakt over de volgende layout heen; die reserveert de ruimte via het
   overlap-mechanisme in style.css (data-overlay-layout). Elk blok zit
   normaliter in z'n eigen .flex-content-wrapper, dus hier dezelfde 2
   varianten als de globale overlay-regel. */
.flex-layout.hero_submenu[data-overlay-layout] + .flex-layout,
.flex-content:has(> .flex-layout.hero_submenu[data-overlay-layout]:last-child) + .flex-content > .flex-layout:first-child {
	--overlay-height: max(4.5rem, calc(4.5 * var(--su)));
}

.flex-layout.hero_submenu .breadcrumbs-col {
	margin-bottom: max(1.5rem, calc(5 * var(--su)));
}

.flex-layout.hero_submenu .content-col {
	position: relative;
	z-index: 2;
	padding-bottom: max(2.5rem, calc(5 * var(--su)));
}

.flex-layout.hero_submenu .pk-heading {
	color: var(--text-color);
}

.flex-layout.hero_submenu .pk-text {
	color: var(--text-color);
	font-size: var(--body-l-regular);
}

.flex-layout.hero_submenu .submenu-col {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: end;
	margin-bottom: calc(-1 * var(--overlay-height));
}

.flex-layout.hero_submenu .submenu-list {
	display: flex;
	flex-direction: column;
	padding: max(1rem, calc(1.5 * var(--su)));
	background-color: var(--white-100);
	width: 100%;
}

.flex-layout.hero_submenu .submenu-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--body-xs-regular);
	gap: max(1rem, calc(1 * var(--su)));
	padding-block: max(.75rem, calc(.75 * var(--su))) max(1rem, calc(1 * var(--su)));
	color: var(--primary-100);
	text-decoration: none;
	transition: background-color 200ms ease;
	border-bottom: 1px solid var(--primary-10);
}

.flex-layout.hero_submenu .submenu-list a:last-child {
	border-bottom: unset;
}

.flex-layout.hero_submenu .submenu-list a:hover {
	/* background-color: var(--neutral-20); */
}

.flex-layout.hero_submenu .submenu-list a::after {
	order: 1;
	width: 1rem;
	height: auto;
	aspect-ratio: 1;
	background-color: var(--primary-50);
	mask: var(--mask-url) center / contain no-repeat;
}

@media screen and (max-width: 992px) {

	.flex-layout.hero_submenu .breadcrumbs-col {
		/* margin-bottom: max(1.5rem, calc(2.5 * var(--su))); */
	}

	.flex-layout.hero_submenu .content-col {
		padding-bottom: 0;
	}

	.flex-layout.hero_submenu .submenu-col {
		/* margin-bottom: 0; */
	}

	.flex-layout.hero_submenu .submenu-col .submenu-list {
		width: 100%;
	}

}