#voorbeeldProjecten {
	overflow: hidden;
}
#voorbeeldProjecten .voorbeeld-project:not(.active),
#voorbeeldProjecten .thumb-swiper:not(.active) {
	display: none;
}

#voorbeeldProjecten .voorbeeld-project .project-images .project-image img,
#voorbeeldProjecten .thumb-swiper img {
	vertical-align: middle;
}

#projectKleuren,
#projectKleuren .kleuren {
	display: flex; align-items: center; gap: 10px;
	justify-content: flex-end;
}
#projectKleuren .project-color {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	border: none; outline: 0; padding: 0; margin: 0; background: transparent;
	border: 2px solid transparent; border-radius: 100%;
	transition: all 0.3s ease-in-out;
}
#projectKleuren .project-color .project-color-swatch {
	display: block; width: 40px; height: 40px; border-radius: 100%;
}
#projectKleuren .project-color.active {
	border-color: #36B57E;
}
#projectKleuren .project-color:hover {
	scale: 1.1;
}

@media screen and (min-width: 768px) {
	#voorbeeldProjecten .voorbeeld-project .project-images {
		display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image {
		position: relative;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(1) {
		grid-area: 1/1/3/9; aspect-ratio: 4/3;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(2) {
		grid-area: 1/9/2/13;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(3) {
		grid-area: 2/9/3/13;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(4) {
		grid-area: 3/7/5/13; aspect-ratio: 4/3;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(5) {
		grid-area: 3/4/4/7;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(6) {
		grid-area: 4/4/5/7;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(7) {
		grid-area: 3/1/4/4;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(8) {
		grid-area: 4/1/5/4;
	}
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(2) > img,
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(3) > img,
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(5) > img,
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(6) > img,
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(7) > img,
	#voorbeeldProjecten .voorbeeld-project .project-images .project-image:nth-child(8) > img {
		position: absolute; inset: 0;
	}

	#voorbeeldProjecten .voorbeeld-project .project-images .project-image img {
		width: 100%; height: 100%; object-fit: cover;
	}

	#voorbeeldProjecten .thumb-swiper {
		display: none;
	}
}
@media screen and (max-width: 767px) {
	#voorbeeldProjecten .voorbeeld-project .swiper-slide img {
		aspect-ratio: 4/3; object-fit: cover; width: 100%;
	}
	#voorbeeldProjecten .thumb-swiper {
		margin-top: 8px;
	}
	#voorbeeldProjecten .thumb-swiper .swiper-slide img {
		width: 100%; height: 110px; object-fit: cover;
	}
	#voorbeeldProjecten .thumb-swiper .swiper-slide-thumb-active img {
		border: 2px solid #ffffff;
	}

	#projectKleuren,
	#projectKleuren .kleuren {
		justify-content: flex-start;
	}
}