.flex-layout.tarieven-layout .pk-grid-container {
	align-items: stretch;
}

.flex-layout.tarieven-layout .image {
	border-radius: 2rem; overflow: hidden;
}
.flex-layout.tarieven-layout .image .image-wrapper {
	background-position: center; background-size: cover;
	height: 100%; width: 100%; object-fit: cover;
} 

.flex-layout.tarieven-layout .content {
	background-color: var(--brand-purple-1); border-radius: 2rem;
	padding: 3.5rem 4.5rem;
}
.flex-layout.tarieven-layout .content .tarieven {
	display: flex; gap: 2rem; margin-top: 3rem; align-items: stretch;
}
.flex-layout.tarieven-layout .content .tarief {
	display: flex; flex-direction: column; justify-content: center; gap: 0.75rem;
	position: relative; width: 100%;
	background-color: #fff; border-radius: 0.75rem;
	padding: 2.5rem 1.5rem; text-align: center;
	box-shadow: 0 4px 10px 0 rgba(0, 0, 102, 0.08);
}
.flex-layout.tarieven-layout .content .tarief > svg {
	display: block; margin-inline: auto;
}
.flex-layout.tarieven-layout .content .tarief .tarief-region {
	position: absolute; top: 0; left: 50%; z-index: 1;
	translate: -50% -50%; max-width: 100%;
	font-size: var(--heading-md); font-weight: 700;
	line-height: 1.3; background-color: var(--brand-secondary-orange);
	padding: 0.5rem 2rem; border-radius: 100px;
	color: #ffffff;
}
.flex-layout.tarieven-layout .content .tarief .tarief-price-pretext {
	font-size: var(--heading-xs); font-weight: 600; color: var(--brand-purple-4);
}
.flex-layout.tarieven-layout .content .tarief .tarief-price-number {
	font-size: var(--heading-lg); font-weight: 600; color: var(--brand-primary-purple);
}
.flex-layout.tarieven-layout .content .tarief.tarief-3 .tarief-price-number {
	font-size: var(--heading-md);
}
.flex-layout.tarieven-layout .content .tarief .pk-text {
	font-size: var(--body-sm);
}
.flex-layout.tarieven-layout .content .pk-button-group {
	margin-top: 2rem;
}

@media screen and (min-width: 993px) {
	.flex-layout.tarieven-layout .content .tarief.tarief-3 .tarief-region {
		padding-inline: 0.5rem; width: 100%;
	}
}

@media screen and (max-width: 1264px) {
	.flex-layout.tarieven-layout .content {
		padding: 2rem 3rem;
	}
}

@media screen and (max-width: 992px) {
	.flex-layout.tarieven-layout .pk-grid-container {
		row-gap: var(--pk-column-gap);
	}
	.flex-layout.tarieven-layout .image .image-wrapper {
		aspect-ratio: 16/11;
	}
	.flex-layout.tarieven-layout .content {
		padding: 2.5rem 1.5rem;
	}
}

@media screen and (max-width: 767px) {
	.flex-layout.tarieven-layout .content .tarieven {
		flex-wrap: wrap; gap: 2rem;
	}	
}