.hero .locatie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: minmax(min-content, 460px) minmax(min-content, 311.25px);
	grid-template-areas:
		"locatie-img text"
		"map map";
	gap: calc(var(--spacing) * 5);
	column-gap: calc(var(--spacing) * 13.5);
	width: 100%;
	height: calc(var(--spacing) * 95);
	margin: calc(var(--spacing) * 8);
	height: fit-content;
}

.hero .locatie #locatie-img {
	grid-area: locatie-img;
	width: 100%;
	height: 460px;
	object-position: 50% 30%;
}

.hero .locatie h3 {
	text-align: center;
	grid-area: text;
	font-size: 3rem;
	font-weight: normal;
	font-family: var(--home-font);
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero .locatie .map {
	width: 100%;
	grid-area: map;
}

.hero .locatie #map {
	width: 100%;
	height: 100%;
	min-height: 311.25px;
	border-radius: 10px;
	box-shadow: var(--img-box-shadow);
	object-fit: cover;
}

.hero .locatie .mapboxgl-popup {
	margin: 0 0 0 calc(var(--spacing) * 3);
}

.hero .locatie .mapboxgl-popup-content {
	background-color: #d2ebe4;
	box-shadow: 0px 0px 30px rgba(34, 40, 38, 0.3);
	padding: calc(var(--spacing) * 4) calc(var(--spacing) * 3);
}

.mapboxgl-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
	border-top-color: #d2ebe4;
	border-bottom-color: #d2ebe4;
}

.mapboxgl-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
	border-right-color: #d2ebe4;
	border-left-color: #d2ebe4;
}

.locatie .mapboxgl-popup.mapboxgl-popup-anchor-left,
.locatie .mapboxgl-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
	margin: 0 0 calc(var(--spacing) * 3) 0;
}

.locatie .mapboxgl-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
	margin: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 3) 0;
}

.hero .locatie .mapboxgl-popup-tip {
	background-color: transparent;
	box-shadow: 0px 0px 30px rgba(34, 40, 38, 0.3);
	margin: 0 calc(var(--spacing) * 6) 0 0;
}
.mapboxgl-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
	margin: 0 calc(var(--spacing) * 2) 0 0;
}

.hero .locatie .mapboxgl-popup-content h3,
.hero .locatie .mapboxgl-popup-content p {
	font-size: 1.125rem;
	margin: 0;
	font-family: var(--body-font);
	text-align: start;
	color: var(--black-75);
	justify-content: start;
}

.img-gallery {
	width: 100%;
	position: relative;
	height: calc(var(--spacing) * 150);
	margin: 0;
}

.img-gallery #img1-container {
	width: 48.5vw;
	max-width: 581px;
	height: calc(var(--spacing) * 57.5);
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
}

.img-gallery #img1-container #img1 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.img-gallery #img2-container {
	max-width: 515px;
	width: 44vw;
	height: calc(var(--spacing) * 91.5);
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
}

.img-gallery #img2-container #img2 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40%;
}

.img-gallery #img4-container {
	width: 48.5vw;
	max-width: 581px;
	height: calc(var(--spacing) * 52.5);
	position: absolute;
	bottom: 0;
	right: 0;
	box-sizing: border-box;
}

.img-gallery #img4-container #img4 {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.img-gallery #img3-container {
	max-width: 515px;
	width: 44vw;
	height: calc(var(--spacing) * 86.5);
	position: absolute;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
}

.img-gallery #img3-container #img3 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip: rect(40%, 800px, 800px, 45%);
}

.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: 940px) {
	.img-gallery #img3-container #img3 {
		object-position: 0% 50%;
	}
}

@media only screen and (max-width: 848px) {
	.img-gallery #img2-container #img2 {
		object-position: 0% 50%;
	}
}

@media only screen and (max-width: 771px) {
	.img-gallery #img2-container #img2 {
		object-position: 25% 50%;
	}
}

@media only screen and (max-width: 746px) {
	.hero .locatie {
		display: flex;
		flex-direction: column;
		gap: calc(var(--spacing) * 4);
		margin: calc(var(--spacing) * 4) 0 0 0;
	}

	.hero .locatie h3 {
		font-size: 2.5rem;
		order: 2;
	}

	.hero .locatie #locatie-img {
		max-height: calc(var(--spacing) * 45);
		order: 1;
	}

	.hero .locatie .map {
		height: calc(var(--spacing) * 45);
		order: 3;
	}

	.img-gallery {
		height: fit-content;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	#gallery .main-img-container {
		position: relative;
		top: 0;
	}

	.img-gallery #img1-container {
		width: 80%;
		height: 60%;
		max-width: 515px;
	}

	.img-gallery #img1-container #img1 {
		object-fit: cover;
		object-position: 50% 50%;
	}

	.img-gallery #img2-container {
		margin: calc(var(--spacing) * 4) 0 calc(var(--spacing) * 4) 0;
		height: 80vh;
		width: 80%;
	}

	.img-gallery #img2-container #img2 {
		object-fit: cover;
		object-position: 50% 50%;
	}

	.img-gallery #img3-container {
		height: 65vh;
		width: 80%;
	}

	.img-gallery #img3-container #img3 {
		object-fit: cover;
		object-position: 50% 35%;
	}

	.img-gallery #img4-container {
		margin: calc(var(--spacing) * 4) 0 0 0;
		height: 50vh;
		width: 80%;
		max-width: 515px;
	}

	.img-gallery #img4-container #img4 {
		object-fit: cover;
		object-position: 50% 50%;
	}
}

@media only screen and (max-width: 456px) {
	.img-gallery {
		height: fit-content;
		display: block;
	}
	#gallery .main-img-container {
		width: 100%;
		max-width: 100%;
	}
}

@media only screen and (max-width: 400px) {
	.hero .section-container .locatie #locatie-img.main-img {
		object-fit: scale-down;
		height: fit-content;
		width: fit-content;
		align-self: center;
	}
}
@media only screen and (max-width: 374px) {
	#gallery .main-img-container #img3 {
		object-position: 0% 50%;
	}
}

@media only screen and (max-width: 268px) {
	#gallery .main-img-container {
		height: fit-content;
	}

	#gallery .main-img-container #img1 {
		object-fit: scale-down;
	}
	#gallery .main-img-container #img2 {
		object-fit: scale-down;
	}
	#gallery .main-img-container #img3 {
		object-fit: scale-down;
	}
	#gallery .main-img-container #img4 {
		object-fit: scale-down;
	}
}

@media only screen and (max-width: 257px) {
	.hero .locatie h3 {
		font-size: 15vw;
	}
}