.flex-layout.contact .panel {
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: max(2.5rem, calc(4.5 * var(--su)));
	row-gap: max(2rem, calc(3 * var(--su)));
}

.flex-layout.contact .zijkant {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(1.5rem, calc(2.5 * var(--su)));
}

.flex-layout.contact .zijkant .contactgegevens strong {
	font-weight: 700;
}

.flex-layout.contact .pk-heading,
.flex-layout.contact .formulier-titel {
	margin: 0;
	background: linear-gradient(90deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	width: fit-content;
}

.flex-layout.contact .adres p:last-child,
.flex-layout.contact .contactgegevens p:last-child,
.flex-layout.contact .formulier-tekst p:last-child {
	margin-bottom: 0;
}

.flex-layout.contact .contactgegevens a {
	color: var(--brand-teal);
	font-weight: 400;
	text-decoration: none;
}

.flex-layout.contact .contactgegevens a:hover,
.flex-layout.contact .contactgegevens a:focus-visible {
	text-decoration: underline;
}

.flex-layout.contact .route {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--brand-teal);
	font-weight: 700;
	text-decoration: none;
}

.flex-layout.contact .route svg {
	transition: transform 0.3s ease-in-out;
}

.flex-layout.contact .route:hover svg,
.flex-layout.contact .route:focus svg,
.flex-layout.contact .route:active svg{
	transform: translateX(0.25em);
}

.flex-layout.contact .gegevens {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	margin: 0;
	font-size: max(0.75rem, calc(0.8125 * var(--su)));
}

.flex-layout.contact .gegevens-rij {
	display: grid;
	grid-template-columns: max(4rem, calc(5 * var(--su))) 1fr;
	column-gap: max(0.5rem, calc(0.75 * var(--su)));
}

.flex-layout.contact .gegevens dt {
	font-weight: 700;
}

.flex-layout.contact .gegevens dd {
	margin: 0;
}

.flex-layout.contact .formulier {
	display: flex;
	flex-direction: column;
	gap: max(1.5rem, calc(2.5 * var(--su)));
}

.flex-layout.contact .formulier-tekst {
	font-size: max(0.875rem, calc(0.875 * var(--su)));
}

@media screen and (max-width: 991px) {
	.flex-layout.contact .panel {
		grid-template-columns: 1fr;
	}

	.flex-layout.contact .formulier {
		order: -1;
	}
}