Hero section too big in mobile view

The actual issue is the max-height:inherit you have on the divs around the logo

.site-header-item

.site-branding
And how you got flex on the parents for that.

Then you have a min height on :

.site-main-header-inner-wrap.

Just open up your console and inspect the elements. You can see where all the height comes from etc. This is just a few of the things. There ARE A LOT OF DIV'S! which are probably from it being made originally in MUSE?

It is not great you have a whole seperate header as you do not need that, pure CSS and media quries can sort the existing header out but that is OK.
The thing I see is a lot of CSS that is not needed on lots of elements and all contributing in your issue (and others).

I would move the banner image to the Header element where it can be better controlled than in the Main element. Also change the image to foreground image. That way you can set the size of the image to the size of the screen. You may find that you may want a different sized image all together, in which case you could use srcset. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset