Fixing my header on mobile

Site URL: http://mustard-clover-z2bx.squarespace.com%20%3Chttps/mustard-clover-z2bx.squarespace.com/%3E

Hi, I'm struggling with my header background image on my mobile.

I added this code to fix the cropping

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 150% !important;
    height: auto!important;
}

It worked to get my image looking right but left a grey space. How do I fill in the grey space below with the same background color as the image?

Thanks so much for any help

Site: https://mustard-clover-z2bx.squarespace.com <https://mustard-clover-z2bx.squarespace.com/>

The site password is Stephanie

Hi. Remove above code & try this new code

/* resize home mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
	min-height: unset !important;
	height: 30vh !important;
}
}