How can I get my section divider images to resize on mobile?

[data-section-id="63079e6224b41c102dbb8dae"] {
  overflow: invisible;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    background-image: url(https://static1.squarespace.com/static/63079612ad280b6848defeb6/t/633496cf651ab509526dd93a/1664390863356/PinkWavesWithWhitedottedLine.png);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    top: 0;
    margin-top: 1px;
    transform: translateY(-100%);
    pointer-events: none!important;
    z-index: 1;
    @media screen and (max-width: 700px) {
      background-size: 100% 100%;
    }
  }
}

I have a cool PNG divider that divides the hero image from the rest of the page. But on mobile, it stretches up vertically. How can I rewrite my code so that my divider adjusts it's height proportionally to its new width??

Hi,

What is your site url? We can help easier