Here's the page in question. Note that the problem also exists on the rest of the site, as least on my iPhone 13 Pro Max.

I've tried a number of meta tags, scripting solutions, and CSS adjustments from the answers of similar questions, but nothing's been working so far. Is there a way to fix the site width issue using HTML/CSS/JS?

These are the two approaches I've been attempting (and failing) to use:

1. Forcing the mobile browser to recalculate width after zooming
2. Preventing user zoom from effecting the background (and possibly header) at all, but allowing user zoom to scale up the linking image elements.

This is the CSS I'm styling the .section-background element with, but the issue appears to affect all the site elements (see both header and grid of images slightly scale and shift left after zoom):

.section-background {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
position: fixed !important;
height: 100vh !important;
aspect-ratio: initial !important;
max-height: 100vh;
overflow-x: hidden !important;
overflow-y: hidden !important;
pointer-events: none !important;
cursor: default !important;
width: 100vw !important;
z-index: 0 !important;
}