Block position changing within the grid on smaller viewports

Site URL: crane-grouper-4fky.squarespace.com

I am having a critical issue with the design of my site.

Blocks are not staying consistently positioned when changing between different viewport sizes.

See the two screenshots below.

The first shows the design on a 1080p monitor. Notice there is one row of grid between the title of section and the paragraph.

The second shows the same design on a 1440p monitor. Now there is almost 3 rows of grid between these sections.

Why is this happening? It's making it impossible to design the site because the design only works on the monitor size it's designed on. As soon as you change monitor, the blocks either overlap or are massively spaced out because they're scaling with the grid in a strange way. The responsiveness does not appear to be working correctly.

How can I fix this?

Thanks.