Custom CSS for creating an arch transition on an image block doesn't work on mobile

Site URL: https://www.lindseyboluytphotog.com/

I followed this tutorial https://ryandejaegher.com/how-to-make-wavy-section-transitions-in-squarespace-7.1/#comment-section to create an "arch" transition on the bottom of the first image block on each page for a more organic feel. Everything looks as desired on a desktop/laptop screen:

The mobile preview in my Squarespace account also looks correct:

However, the mobile appearance of the published site is different. The nice, pretty arch is transformed into some sort of trapezoid instead:

Does anyone know how to correct this? I appreciate your help, thank you!

Here is the code I have saved in Custom CSS:

// Adding arch transition to photo on Weddings page //
[data-section-id="61d3af566a70606092df0ff5"]:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 120px;
  bottom: 0;
  left: 0;
  background: #e6ded1;

  /* Use the ID from your SVGs Clip Path*/
  clip-path: url(#archDown);
}
 

And the code for the .svg arch shape saved into the Footer Injection so it can be used on multiple pages:

// Adding arch transition to photo on Weddings page //
[data-section-id="61d3af566a70606092df0ff5"]:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 120px;
  bottom: 0;
  left: 0;
  background: #e6ded1;

  /* Use the ID from your SVGs Clip Path*/
  clip-path: url(#archDown);
}