.locaties_container{
	display: grid;
}

.locatie{
	grid-column: 1;
	grid-row: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(4, 1fr);
    row-gap: 0.1rem;
}

.locatie_img{
	grid-column: 1 / 6;
    grid-row: 1 / 5;
	opacity: 0;
	transition: 0.3s opacity;
}

.locatie_img picture{
	display: flex;
	width: 100%;
	height: 100%;
}

.locatie_img img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.locatie_content{
	background: var(--lichtroze);
	color: var(--grijs);
	padding: 4rem;
	grid-column: 6 / 13;
	position: relative;
	transition: 0.3s background, 0.3s padding, 0.3s margin;
	z-index: 20;
}

.locatie_content_titel{
	font-size: 2.4rem;
	font-weight: 400;
	line-height: 3.4rem;
}

.locaties_container:hover .locatie_content{
	background: var(--lichtroze);
}

.locatie:has(.locatie_content:hover) .locatie_img{
	opacity: 1;
}

.locaties_container .locatie:first-child:not(:has(.locatie_content:hover)) .locatie_img{
	opacity: 1;
}

.locaties_container .locatie:first-child .locatie_content:not(:hover),
.locaties_container .locatie_content:hover{
	background: var(--roze);
}

.locaties_container .locatie:first-child:not(:has(.locatie_content:hover)) .locatie_content,
.locatie_content:hover{
	margin-left: -2rem;
	padding-left: 6rem;
}

.locaties_container:has(.locatie_content:hover) .locatie_content:not(:hover){
	background: var(--lichtroze);
	padding-left: 4rem !important;
	margin-left: 0 !important;
}

@media (max-width:767px)
{		
	.locatie_img{
		display: none;
	}
	
	.locatie,
	.locaties_container{
		display: block;
	}
	
	.locaties_container:has(.locatie_content:hover) .locatie_content:not(:hover),
	.locaties_container .locatie:first-child:not(:has(.locatie_content:hover)) .locatie_content, .locatie_content:hover,
	.locatie_content{
		margin-left: 0 !important;
		padding: 3rem !important;
	}
	
	.locatie_content{
		display: flex;
		gap: 3rem;
	}
	
	.locatie_mob_img{
		max-width: 14rem;
		width: 14rem;
	}
}

@media (min-width:768px) and (max-width:991px)
{
	
}

@media (min-width:992px) and (max-width:1199px)
{
	
}

@media (min-width:1200px) and (max-width:1399px)
{
    
}

@media (min-width:1400px)
{
    
}