/**
 * Layout: Content - Tarieven
 * Slug: tarieven
 */

.location_map-layout + .tarieven-layout {
	padding-top: max(5rem, calc(7 * var(--su)));
}
.tarieven-layout {
	position: relative;
	z-index: 2;
}
.tarieven-layout .pk-grid-container {
	background: #E8EEF8;
	padding-block: max(4rem, calc(5 * var(--su)));
	border-radius: 2rem;
	align-items: center;
}
.tarieven-layout .content-col .pk-heading {
	font-family: var(--pk-text-font-family);
}
.tarieven-layout .cta-col {
	--button-bg-1: var(--dia-blue);
	--button-bg-1-hover: var(--dia-blue-dark);
	--button-text-color-1: #ffffff;
	--button-text-color-1-hover: #ffffff;

	padding: max(3.5rem, calc(4 * var(--su)))
	max(var(--pk-site-gutter), calc(3 * var(--su)));
	background-color: var(--dia-pink);
	color: #ffffff;
	aspect-ratio: 11/13;
	mask: url('../../../../assets/images/imageMaskReversed.svg');
	mask-size: cover;
	mask-position: center;
	mask-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	justify-content: end;
}
.tarieven-layout .cta-col .pk-heading {
	color: inherit;
}
.tarieven-layout .cta-col .pk-button svg path {
	stroke: #ffffff;
}

@media screen and (min-width: 993px) {
	.mira_content_d1-layout + .tarieven-layout {
		margin-block: calc(4 * var(--su));
	}
}

@media screen and (max-width: 992px) {
	.tarieven-layout .pk-grid-container {
		padding-inline: 20px;
	}
	.tarieven-layout .cta-col {
		margin-top: 4rem;
	}
}

@media screen and (max-width: 767px) {
	.tarieven-layout {
		padding-inline: 0;
	}
	.tarieven-layout .pk-grid-container {
		padding-inline: var(--pk-site-gutter);
		border-radius: 0;
	}

}