@media only screen and (min-width: 1400px) {
	.hero-home .container-fluid {
		margin-bottom: 6.5% !important;
	}
}

.hero-home__background {
	position: relative;
	border-top-right-radius: 40px;
    overflow: hidden;
}

.hero-home__background img {
	width: 100%;
}

.hero-home__background .clip-1 {
	background-color: var(--white);
	position: absolute;
	bottom: 0;
	left: 0;
	height: 37.5%;
	width: 50%;
}

.hero-home__background .clip-1::before {
	background-color: transparent;
	position: absolute;
	content: '';
	left: 100%;
	width: 40px;
	height: 40px;
	bottom: 0;
}

.hero-home__background .clip-2 {
	background-color: var(--white);
	position: absolute;
	right: 0;
	bottom: 25%;
	height: 12.5%;
	width: 25%;
}

.hero-home__background .clip-3 {
	background-color: var(--white);
	position: absolute;
	left: 0;
	top: 25%;
	height: 12.5%;
	width: 75%;
}

.hero-home h1 {
	font-family: var(--font-poppins);
	text-align: left;
	color: var(--grey);
	text-transform: uppercase;
	letter-spacing: 10.5px;
	letter-spacing: 0.656rem;
}

.hero-home .niveaus {
	font-family: var(--font-poppins);
	font-size: 21px;
	font-size: 1.313rem;
	line-height: calc(34 / 21);
	font-weight: bold;
	color: var(--maroon);
}

@media only screen and (min-width: 768px) {
	.hero-home h1 {
		letter-spacing: 15px;
		letter-spacing: 0.938rem;
	}
}

@media only screen and (min-width: 992px) {
	.hero-home .niveaus {
		font-size: 28px;
		font-size: 1.75rem;
		line-height: calc(46 / 28);
	}
}

.image-dot {
	height: calc(27%);
	position: relative;
}

.image-dot img {
	height: 100%;
	border-radius: 50%;
}

.image-dots {
	position: relative;
}

@media only screen and (min-width: 768px) {
	.hero-home__container {
		position: absolute;
		left: 0;
		top: 0;
	}
}

.svg {
  position: absolute;
  width: 50;
  height: 100;
}

.hero-home__background {
	-webkit-clip-path: url(#my-clip-path);
	clip-path: url(#my-clip-path);
}

.image-dots-container {
	position: absolute;
	height: 100%;
}

.hero-home-banner {
	background-color: var(--orange);
	padding: 34px 0;
	padding: 2.125rem 0;
}

.hero-home-banner__content {
	font-family: var(--font-poppins);
	color: var(--white);
}

.hero-home-banner__content span {
	font-weight: 500;
	font-size: 16px;
	font-size: 1rem;
	line-height: calc(26 / 16);
	letter-spacing: 2.4px;
	letter-spacing: 0.169rem;
	text-transform: uppercase;
}

.hero-home-banner__content .date {
	font-weight: bold;
	font-size: 26px;
	font-size: 1.625rem;
	line-height: calc(43 / 26);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 12px;
	margin-bottom: 0.75rem;
}

@media only screen and (min-width: 992px) {

	.hero-home-banner__content span {
		font-size: 18px;
		font-size: 1.125rem;
		line-height: calc(29 / 18);
		letter-spacing: 2.7px;
	}

	.hero-home-banner__content .date {
		font-size: 30px;
		font-size: 1.875rem;
		line-height: calc(49 / 30);
	}
}
/* Derde item (schoolgids) en zijn scheidingslijn blijven verborgen zolang de titel in Iris leeg is */
.hero-home-banner__extra:has(.date:empty),
.hero-home-banner__extra:has(+ .hero-home-banner__extra .date:empty) {
	display: none;
}