#vergelijking {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}
#vergelijking .vergelijking-item {
	border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.10);
	background: rgba(255, 255, 255, 0.05); padding: 40px 16px;
}
#vergelijking .vergelijking-item > h3 {
	font-size: 28px; font-family: 'avenir-next-demibold' !important;
	margin-bottom: 1.75em;
}

#vergelijking .onderwerpen .onderwerp-titel {
	display: flex; align-items: center; justify-content: space-between; gap: 1em;
	font-size: 18px; font-family: 'avenir-next-demibold' !important;
	padding-block: 1em; border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	cursor: pointer;
}
#vergelijking .onderwerpen .onderwerp-titel svg {
	flex-shrink: 0; display: block;
}
#vergelijking .onderwerp:not(.active) .onderwerp-titel .opened {
	display: none;
}
#vergelijking .onderwerp.active .onderwerp-titel .closed {
	display: none;
}
#vergelijking .onderwerpen .onderwerp-teksten {
	display: grid; grid-template-rows: 0fr;
	overflow: hidden; transition: grid-template-rows 0.3s ease-in-out;
}
#vergelijking .onderwerpen .onderwerp-teksten-wrapper {
	overflow: hidden;
}
#vergelijking .onderwerpen .onderwerp.active .onderwerp-teksten {
	grid-template-rows: 1fr;
}

#vergelijking .onderwerp-teksten .tekst-item {
	padding: 24px 16px; font-size: 16px; 
	border-radius: 5px; background: rgba(255, 255, 255, 0.05);
}
#vergelijking .onderwerp-teksten .tekst-item:not(:last-child) {
	margin-bottom: 8px;
}
#vergelijking .onderwerp-teksten .tekst-item > p {
	margin-bottom: 0.5em;
}
#vergelijking .onderwerp-teksten .tekst-item > *:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
	#vergelijking {
		overflow: auto; padding-bottom: 40px; gap: 25px;
	}
	#vergelijking .vergelijking-item {
		max-width: calc(100vw - 100px); flex-shrink: 0;
	}
}
@media screen and (max-width: 767px) {
	#vergelijking .vergelijking-item {
		width: calc(100vw - 50px);
	}
}