Estoy trabajando en mi sitio web y estoy tratando de usar algunas ondas para romper el fondo, sin embargo, ocurren algunos errores cuando cambio el tamaño de mi pantalla. El problema es que la onda comienza a "volar" con un espacio en blanco entre la otra onda cuando se redimensiona la pantalla, el error ocurre porque necesito ajustar la altura de las ondas a 320px para que sea visible en una vista de escritorio normal, ya que es por alguna razón oculta detrás del siguiente div cuando la altura no está configurada en 320px

¿Algunas ideas?

Código:

 <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>

Cómo se ve con una altura de 320 px en el tamaño de la pantalla del escritorio: https://cdn.discordapp.com/attachments/381547722374774784/943127798967566376/unknown.png

Cómo se ve con una altura de 320 px en una pantalla pequeña: https://cdn.discordapp.com/attachments/381547722374774784/943127798694965288/unknown.png

Si configuro la altura en 0px, la ola no es visible en el escritorio ya que se esconde debajo del siguiente div, no estoy seguro de por qué. Cualquier ayuda apreciada - gracias