/**
 * Layout: Hero - Locatie detail
 * Slug: hero_downloads
 */
.hero_downloads-layout + .flex-layout {
	background-color: transparent;
}
.hero_downloads-layout {
	position: relative;
	z-index: 10;
    padding-top: var(--pk-hero-top-spacing);
	background-color: #ffffff;
	border-radius: 2rem;
	padding-bottom: max(2rem, calc(4 * var(--su)));
}

.hero_downloads-layout:has(.image-col) {
	padding-bottom: 0;
}
.hero_downloads-layout:not(:has(.image-col)) + .contentblok_cta-layout.has-background {
	padding-top: max(2.5rem, calc(6.25 * var(--su)));
}

.hero_downloads-layout .image-col {
	position: relative;
	margin-bottom: -4rem;
}
.hero_downloads-layout .image-col img:not(.piekuren) {
	mask: url('../../../../assets/images/imageMask.svg');
	mask-size: cover;
	mask-position: center;
	mask-repeat: no-repeat;
	aspect-ratio: 22/27;
	object-fit: cover;
	width: 100%;
}

.hero_downloads-layout .download {
	position: absolute;
	left: 0;
	bottom: 35%;
	z-index: 2;
	background-color: #ffffff;
	border-radius: 1rem;
	border-bottom-right-radius: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	font-size: 1.125rem;
	padding: max(1rem, calc(1.5 * var(--su)))
	max(1.5rem, calc(2 * var(--su)));
	width: 100%;
	max-width: max(320px, calc(20 * var(--su)));
	text-decoration: none;
	color: inherit;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
	line-height: 1.2;
}
.hero_downloads-layout .download:nth-child(2) {
	bottom: 15%;
}
.hero_downloads-layout .download .icon-wrapper {
	width: 2em;
	height: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--dia-green);
	border-radius: 100%;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
}
.hero_downloads-layout .image-col .download:hover .icon-wrapper {
	background-color: var(--button-bg-1-hover);
}

@media screen and (min-width: 993px) {
	.hero_downloads-layout .content-col {
		padding-bottom: 2rem;
	}
	.hero_downloads-layout .content-col .downloads {
		display: none;
	}
	.hero_downloads-layout .download {
		translate: -25%;
	}
	.hero_downloads-layout .download:nth-child(2) {
		translate: -50%;
	}
}

@media screen and (max-width: 992px) {
	.hero_downloads-layout {
		margin-bottom: 4rem;
	}
	.hero_downloads-layout .downloads {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
		margin-block: 1rem;
		width: 100%;
	}
	.hero_downloads-layout .download {
		position: static;
		width: 100%;
		max-width: 100%;
	}

	.hero_downloads-layout .image-col {
		margin-top: 4rem;
	}
	.hero_downloads-layout .image-col .downloads {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.hero_downloads-layout .image-col {
		margin-top: 1.5rem;
	}
}