.hero-3 {
  height: 100vh;
  background-image: var(--bg-mobile);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-divider {
  line-height: 0;
}

.hero-divider svg {
  display: block;
  width: 100%;
  height: 30px;
}

.hero-divider svg path {
  fill: var(--bs-white);
}

/* Switch the variable at the breakpoint */
@media (min-width: 768px) {
  .hero {
    background-image: var(--bg-desktop);
  }

  .hero-divider svg {
    height: 40px;
  }
}

/* Switch the variable at the breakpoint */
@media (min-width: 992px) {
  .hero-divider svg {
    height: 60px;
  }
}