I'm working on my website and I'm trying to use some waves to break up the background, however some errors occur when I resize my screen. The problem is that the wave start "flying" with a whitespace between the other wave when the screen is rezised, the error occurs since I need to adjust the waves height to 320px for it to be visible on a normal desktop view, since it is for some reason hidden behind the next div when the height is not set to 320px

Any ideas?

Code:

<div class="feature" style="height: 320px;background: var(--primary-color);">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 550">
      <path fill="var(--wave)" fill-opacity="1" d="M0,160L80,165.3C160,171,320,181,480,170.7C640,160,800,128,960,133.3C1120,139,1280,181,1360,202.7L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
    </svg>
  </div>
</div>

What it looks like with 320px height on dekstop screen size: https://cdn.discordapp.com/attachments/381547722374774784/943127798967566376/unknown.png

What it looks like with 320px height on small screen: https://cdn.discordapp.com/attachments/381547722374774784/943127798694965288/unknown.png

If I set the height to 0px the wave is not visible on desktop since it hides under the next div, not sure why. Any help appreciated - thanks