.flex-layout.content_form {
	--text-color: var(--primary-100);
}

.flex-layout.content_form .content-col {
	padding: max(1.5rem, calc(3 * var(--su)));
	background-color: var(--primary-100);
}

.flex-layout.content_form .content-col .pk-heading, .flex-layout.content_form .content-col .pk-text {
	color: var(--white-100);
}

.flex-layout.content_form .content-col .pk-component.avatar-button {
	margin-top: max(1rem, calc(1.5 * var(--su)));
	--background: var(--primary-95);
}

.flex-layout.content_form .content-col .pk-component.avatar-button .text .title {
    color: var(--white-100);
}

.flex-layout.content_form .content-col .pk-component.avatar-button .text .subtitle {
    color: var(--primary-30);
}

/* form-col: afbeelding vult de hoogte van het form-wrapper (dat de kolomhoogte bepaalt) */

.flex-layout.content_form .form-col {
	position: relative;
	display: flex;
}

.flex-layout.content_form .form-col .image {
	position: absolute;
	top: calc(-1 * max(3rem, calc(3 * var(--su))));
	bottom: calc(-1 * max(3rem, calc(3 * var(--su))));
	left: 0;
	right: 0;
}

.flex-layout.content_form .form-col .image img {
	display: block;
	width: 85%;
	height: 100%;
	margin-left: auto;
	object-fit: cover;
	object-position: center;
}

.flex-layout.content_form .form-col .form-wrapper {
	position: relative;
	z-index: 1;
	width: max(35rem, calc(35 * var(--su)));
	max-width: 100%;
	height: 100%;
	padding: max(1.5rem, calc(2 * var(--su))) max(1.5rem, calc(2.5 * var(--su)));
	background-color: var(--white-100);
	color: var(--primary-100);
}

.flex-layout.content_form .form-col .form-wrapper .intro {
	display: flex;
	flex-direction: column;
	gap: max(.5rem, calc(.5 * var(--su)));
	margin-bottom: max(1rem, calc(1 * var(--su)));
}

.flex-layout.content_form .form-col .form-wrapper .intro .pk-heading {
	margin: 0;
	font-size: var(--scaling-h4);
}

.flex-layout.content_form .form-col .form-wrapper form .gform_footer button {
	width: 100%;
	justify-content: center;
	display: flex !important;
}

/* Extra padding zodat de uitstekende afbeelding (.form-col .image) past. Alleen desktop. */
@media screen and (min-width: 993px) {

	.flex-layout.content_form .content-row {
		padding-block: max(3rem, calc(3 * var(--su)));
	}

}

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

	.flex-layout.content_form {
		margin-bottom: unset;
	}

	.flex-layout.content_form .form-col {
		flex-direction: column-reverse;
		padding-bottom: max(12.5rem, calc(12.5 * var(--su)));
	}

	.flex-layout.content_form .form-col .image {
		position: absolute;
		bottom: 0;
		top: unset;
		height: 60%;
		width: 100vw;
		margin-left: calc(-1 * var(--pk-site-gutter));
	}

	.flex-layout.content_form .form-col .image img {
		width: 100%;
		height: 100%;
	}

	.flex-layout.content_form .form-col .form-wrapper {
		width: 100%;
		height: auto;
	}

}