.systeemonderdelen {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	gap: 24px 16px;

	@media screen and (min-width: 1140px) {
		&:not(:has(> :nth-child(6)))>.systeemonderdeel-card:not(:last-child) .systeemonderdeel-image:after {
			position: absolute;
			display: block;
			z-index: 2;
			content: '';
			background-repeat: no-repeat;
			background-clip: content-box;
			background-size: 12px;
			background-color: var(--so-color-white);
			background-position: center;
			background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.14286 6.85714H0V5.14286H5.14286V0H6.85714V5.14286H12V6.85714H6.85714V12H5.14286V6.85714Z' fill='%231E1E1E'/%3E%3C/svg%3E");
			padding: 4px;
			box-sizing: border-box;
			right: -38px;
			top: 50%;
			transform: translateY(-50%);
			width: 48px;
			height: 48px;
			border-radius: 50%;
			border: 3px solid var(--so-color-secundary, #DD7F13);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}
	}

	@media screen and (min-width: 920px) and (max-width: 1140px) {
		grid-template-columns: 1fr 1fr 1fr 1fr;

		&:not(:has(> :nth-child(5)))>.systeemonderdeel-card:not(:last-child) .systeemonderdeel-image:after {
			position: absolute;
			display: block;
			z-index: 2;
			content: '';
			background-repeat: no-repeat;
			background-clip: content-box;
			background-size: 12px;
			background-color: var(--so-color-white);
			background-position: center;
			background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.14286 6.85714H0V5.14286H5.14286V0H6.85714V5.14286H12V6.85714H6.85714V12H5.14286V6.85714Z' fill='%231E1E1E'/%3E%3C/svg%3E");
			padding: 4px;
			box-sizing: border-box;
			right: -38px;
			top: 50%;
			transform: translateY(-50%);
			width: 48px;
			height: 48px;
			border-radius: 50%;
			border: 3px solid var(--so-color-secundary, #DD7F13);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}
	}

	@media screen and (min-width: 720px) and (max-width: 920px) {
		grid-template-columns: 1fr 1fr 1fr;

		&:not(:has(> :nth-child(4)))>.systeemonderdeel-card:not(:last-child) .systeemonderdeel-image:after {
			position: absolute;
			display: block;
			z-index: 2;
			content: '';
			background-repeat: no-repeat;
			background-clip: content-box;
			background-size: 12px;
			background-color: var(--so-color-white);
			background-position: center;
			background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.14286 6.85714H0V5.14286H5.14286V0H6.85714V5.14286H12V6.85714H6.85714V12H5.14286V6.85714Z' fill='%231E1E1E'/%3E%3C/svg%3E");
			padding: 4px;
			box-sizing: border-box;
			right: -38px;
			top: 50%;
			transform: translateY(-50%);
			width: 48px;
			height: 48px;
			border-radius: 50%;
			border: 3px solid var(--so-color-secundary, #DD7F13);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}
	}

	@media screen and (max-width: 720px) {
		grid-template-columns: 1fr 1fr;

		&:not(:has(> :nth-child(3)))>.systeemonderdeel-card:not(:last-child) .systeemonderdeel-image:after {
			position: absolute;
			display: block;
			z-index: 2;
			content: '';
			background-repeat: no-repeat;
			background-clip: content-box;
			background-size: 12px;
			background-color: var(--so-color-white);
			background-position: center;
			background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.14286 6.85714H0V5.14286H5.14286V0H6.85714V5.14286H12V6.85714H6.85714V12H5.14286V6.85714Z' fill='%231E1E1E'/%3E%3C/svg%3E");
			padding: 4px;
			box-sizing: border-box;
			right: -38px;
			top: 50%;
			transform: translateY(-50%);
			width: 48px;
			height: 48px;
			border-radius: 50%;
			border: 3px solid var(--so-color-secundary, #DD7F13);
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}
	}
}

.systeemonderdeel-card {
	flex: 1;
}

.systeemonderdeel-image {
	display: flex;
	position: relative;
	background-color: var(--so-color-background-dark);
	border-radius: 20px;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 24px;
		object-fit: contain;
		aspect-ratio: 1/1;

		@media screen and (max-width: 720px) {
			padding: 12px 24px;
		}
	}
}

.systeemonderdeel-content {
	h3 {
		margin-top: 12px;
		margin-bottom: 12px;
		font-size: var(--so-fontsize-body);
		font-weight: 700;
		line-height: 1.5;
		letter-spacing: -0.011em;
	}

	& > *:last-child {
		margin-bottom: 0;
	}
}

.systeemonderdeel-description {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	margin-top: 0px !important;
}

@media(max-width:900px) {
	.systeemonderdeel-image i:after {
		display: none;
	}
}

@media(max-width:480px) {
	.systeemonderdeel-card {
		max-width: unset !important;
		flex-basis: 100%;
	}

	.systeemonderdeel-image {
		height: unset;
	}
}