.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) no-repeat center center;
  background-size: cover;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
  position: relative;
}

.hero h1 {
  margin-bottom: 5rem;
  font-size: 5rem;
  font-weight: bold;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 110px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23f3f4f6' d='M0,80 C90,90 180,60 270,75 C360,90 450,100 540,80 C630,60 720,100 810,85 C900,70 990,90 1080,75 C1170,60 1260,85 1350,80 C1400,78 1440,85 1440,85 V120 H0 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: 1;
  pointer-events: none;
}

.hero--leiding::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23fbe8ff' d='M0,80 C90,90 180,60 270,75 C360,90 450,100 540,80 C630,60 720,100 810,85 C900,70 990,90 1080,75 C1170,60 1260,85 1350,80 C1400,78 1440,85 1440,85 V120 H0 Z'/%3E%3C/svg%3E");
}

@media (max-width: 768px) {
  .hero {
    height: 60vh;
  }

  .hero h1 {
    font-size: 3rem;
  }
}