Header image not resizing for mobile + tablet

Site URL: https://www.periodictableofveg.com/

Hi there, I'm having an ongoing issue with the size of my homepage image. I have tried different bits of custom CSS and each seems to generate problems.

My homepage banner image cuts off on some mobile devices and on all tablet devices. I've tried two things:

OPTION 1 (this still has issues on some mobile and tablet devices)

@media screen and (max-width:1200px) {

[data-section-id="5feb9cc97360c774c5ed4562"] {

    min-height: 40vh !important;

}

}

Can you help? Thanks!

OPTION 2 (makes the design responsive, but creates a massive white gap on mobile)

@media screen and (max-width:640px) {

[data-section-id="5feb9cc97360c774c5ed4562"] .section-background img {

    width: 100% !important;

    height: auto !important;

}

}

Remove your code & add new code

/* Tablet */
@media screen and (max-width:991px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
}
}