Issue with "Background Image" being cropped

Hi,

page: https://ellipse-teal-dl5w.squarespace.com/contact
pass: 04

I have a issue on my contact page. The background image is a full bleed background. But at certain px width it will crop the bottom moon in the image with a grey bar instead:

Bigger size full bleed looks great:

As soon as we resize the screen, it introduces a grey bar and cuts/crops out the full bleed image effect :

on mobile looks great and doesn't crop the bottom part of the bleed, the moon etc:


Appreciate all the support given on this space, hope you can help.
Cheers

Try setting the section minimum height to L or 85vh (try adjusting this value)

Hi, thanks for your time. Yes I've tried the section height min to L and manual vh. That fixes the issue, but has too much spacing top and bottom design wise.

I'd like to keep the small spacing at full screen and then when the width is smaller like this: 

I'd like the spacing to be dynamic and center the contact form like this:

So some sort of dynamic spacing css code when the window is a certain width?

Cheers