/* BLOCK TYPE 28 - form */
/* BLOCK TYPE 28 - form */
/* BLOCK TYPE 28 - form */

.block_type_28 {
	position: relative;
	background-color: lightgray;
	color: black;

	display: grid;
	grid-template-columns: 1fr 5vw 1fr 5vw;
	grid-template-rows: 5vw 1fr 5vw;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}
.block_type_28::before {
	content: '28';
	background-color: #84de02;
}

/* THEME */
.block_type_28.theme_licht {
	background-color: var(--bg-light);
	color: var(--txt-light);
}
.block_type_28.theme_donker {
	background-color: var(--bg-dark);
	color: var(--txt-dark);
}

.block_type_28 .image {
	position: relative;
	width: 100%;
	height: 100%;
	grid-area: 2 / 1 / 3 / 2;
}
.block_type_28 .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.block_type_28 .content {
	grid-area: 2 / 3 / 3 / 4;
}
.block_type_28 .content .number {
	font-size: 32px;
	font-weight: 300;
}
.block_type_28 .content .heading {
	font-size: 52px;
	font-weight: 700;
	line-height: 68px;
}
.block_type_28 .content button {
	padding: 1em;
	font-size: inherit;
	margin-top: 1em;
	background-color: var(--clr-magenta-100);
	border: 1px solid var(--clr-magenta-100);
	color: white;
	cursor: pointer;
}
.block_type_28 .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-magenta-100);
	color: var(--clr-magenta-100);
}
.block_type_28 .content input {
	width: 100%;
	padding: 1em;
	font-size: inherit;
	margin-top: 1em;
	background-color: transparent;
	border: 0px;
	border-bottom: 1px solid var(--clr-border);
}
.block_type_28 .content textarea {
	width: 100%;
	height: 8em;
	padding: 1em;
	font-size: inherit;
	margin-top: 1em;
	background-color: transparent;
	border: 0px;
	border-bottom: 1px solid var(--clr-border);
}

/* COLOR */
.block_type_28.theme_donker .content input,
.block_type_28.theme_donker .content textarea {
	color: var(--txt-dark);
}
.block_type_28.theme_licht .content input,
.block_type_28.theme_licht .content textarea {
	color: var(--txt-light);
}
.block_type_28.color_magenta .content button {
	background-color: var(--clr-magenta-100);
	border: 1px solid var(--clr-magenta-100);
}
.block_type_28.color_magenta .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-magenta-100);
	color: var(--clr-magenta-100);
}
.block_type_28.color_blauw .content button {
	background-color: var(--clr-blue-100);
	border: 1px solid var(--clr-blue-100);
}
.block_type_28.color_blauw .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-blue-100);
	color: var(--clr-blue-100);
}
.block_type_28.color_groen .content button {
	background-color: var(--clr-green-100);
	border: 1px solid var(--clr-green-100);
}
.block_type_28.color_groen .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-green-100);
	color: var(--clr-green-100);
}
.block_type_28.color_oranje .content button {
	background-color: var(--clr-orange-100);
	border: 1px solid var(--clr-orange-100);
}
.block_type_28.color_oranje .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-orange-100);
	color: var(--clr-orange-100);
}

@media (max-width: 1000px) {
	.block_type_28 {
		padding: 5vw;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 5vw;
	}

	.block_type_28 .image {
		grid-column: 1 / -1;
		grid-row: 1 / 2;
	}
	.block_type_28 .content {
		grid-column: 1 / -1;
		grid-row: 2 / 3;
	}
}