.hero .main-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: fit-content fit-content fit-content;
	grid-template-areas:
		"groepsles1 groepsles2"
		"groepsles-img groepsles2"
		"groepsles3 groepsles4";
	column-gap: calc(var(--spacing) * 8);
	row-gap: calc(var(--spacing) * 5);
	margin: calc(var(--spacing) * 8) 0 0 0;
	height: fit-content;
}

.hero .main-content .groepsles:nth-of-type(1) {
	grid-area: groepsles1;
}

.hero .main-content .groepsles:nth-of-type(2) {
	grid-area: groepsles2;
}

.hero .main-content .groepsles:nth-of-type(3) {
	grid-area: groepsles3;
}

.hero .main-content .groepsles:nth-of-type(4) {
	grid-area: groepsles4;
}

.hero .main-content #groepsles-img {
	grid-area: groepsles-img;
	/* grid-row-start: auto; */
	align-self: end;
	width: 100%;
	height: calc(var(--spacing) * 37.5);
}

.hero .main-content .groepsles {
	height: fit-content;
}

.hero .main-content .groepsles-text {
	margin: 0;
}

.hero .main-content h3 {
	margin: 0 0 calc(var(--spacing) * 2) 0;
	line-height: 23px;
}

.main-dec .dec-cirkel:nth-of-type(1) {
	top: 500px;
	left: -140px;
}

.main-dec .dec-cirkel:nth-of-type(2) {
	bottom: 320px;
	right: -140px;
}

@media only screen and (max-width: 1000px) {
	.hero .main-content {
		grid-template-rows: 201.328px 333.609px 351.938px;
	}

	.hero .main-content #groepsles-img {
		margin: calc(var(--spacing) * 8) 0 0 0;
		grid-area: groepsles4;
		align-self: self-start;
	}

	.hero .main-content .groepsles:nth-of-type(4) {
		/* margin: -102px 0 0 0; */
		grid-area: groepsles-img;
	}
}
@media only screen and (max-width: 980px) {
	.hero .main-content {
		grid-template-rows: 201.328px 333.609px 373.938px;
	}
	.hero .main-content #groepsles-img {
		margin: 86.046px 0 0 0;
	}
}
@media only screen and (max-width: 972px) {
	.hero .main-content {
		grid-template-rows: 232.328px 333.609px 373.938px;
	}
}
@media only screen and (max-width: 966px) {
	.hero .main-content {
		grid-template-rows: 232.328px 333.609px 395.984px;
	}
	.hero .main-content #groepsles-img {
		margin: 108.092px 0 0 0;
	}
}
@media only screen and (max-width: 948px) {
	.hero .main-content {
		grid-template-rows: 232.328px 355.656px 395.984px;
	}
}
@media only screen and (max-width: 926px) {
	.hero .main-content {
		grid-template-rows: 232.328px 355.656px 417.994px;
	}
}
@media only screen and (max-width: 905px) {
	.hero .main-content {
		grid-template-rows: 232.328px 377.703px 417.994px;
	}
}
@media only screen and (max-width: 892px) {
	.hero .main-content {
		grid-template-rows: 254.375px 377.703px 440.994px;
	}
}
@media only screen and (max-width: 892px) {
	.hero .main-content {
		grid-template-rows: 254.375px 377.703px 333.609px 333.609px;
		grid-template-areas:
			"groepsles1 groepsles2"
			"groepsles-img groepsles2"
			"groepsles3 ."
			"groepsles4 groepsles4";
	}

	.hero .main-content #groepsles-img {
		width: 100%;
		height: 100%;
		margin: 0;
	}
}
@media only screen and (max-width: 842px) {
	.hero .main-content {
		grid-template-rows: 254.375px 399.75px 333.609px 440.994px;
	}
}
@media only screen and (max-width: 827px) {
	.hero .main-content {
		grid-template-rows: 254.375px 399.75px 355.656px 440.994px;
	}
}
@media only screen and (max-width: 827px) {
	.hero .main-content {
		grid-template-rows: 254.375px 399.75px 377.703px 440.994px;
	}
}
@media only screen and (max-width: 815px) {
	.hero .main-content {
		grid-template-rows: 276.422px 399.75px 377.703px 440.994px;
	}
}
@media only screen and (max-width: 808px) {
	.hero .main-content {
		grid-template-rows: 276.422px 421.797px 377.703px 440.994px;
	}
}
@media only screen and (max-width: 777px) {
	.hero .main-content {
		grid-template-rows: 276.422px 443.844px 377.703px 440.994px;
	}
}
@media only screen and (max-width: 746px) {
	.hero .main-content {
		display: block;
		margin: calc(var(--spacing) * 4) 0 0 0;
	}

	.hero .main-content .groepsles:nth-of-type(2) {
		margin: calc(var(--spacing) * 4) 0 0 0;
	}
	.hero .main-content .groepsles:nth-of-type(3) {
		margin: calc(var(--spacing) * 4) 0 0 0;
	}
	.hero .main-content .groepsles:nth-of-type(4) {
		margin: calc(var(--spacing) * 4) 0 0 0;
	}
	.hero .main-content #groepsles-img {
		margin: calc(var(--spacing) * 4) 0 0 0;
	}
}