Impact Template: Decreasing Banner Height On Desktop/Mobile?

Site URL: https://decisivemarketing.co/

I'm having a heck of a time trying to figure out how to properly decrease the banner height on desktop or mobile for my site, which was built on the Impact template. 

On Desktop it looks fine. Though, I wouldn't mind making the banner slightly shorter.

On mobile, I inserted a CSS code that someone shared to prevent the banner on mobile from zooming the image in. The below code was inserted into Design > Custom CSS:

@media screen and (max-width:640px) {
.homepage figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#banner-wrapper {
    height: 100px;
}
}

While the code works great to prevent resizing/zooming on mobile, I'm left with large black sections underneath each image, that I would love to eliminate. (see attached screenshot for example)

Any help would be greatly appreciated. 

Thanks!

Use this code

@media screen and (max-width:640px) {
.homepage figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#banner-wrapper {
    height: 100px;
}
section#new-page-1 {
    min-height: unset !important;
    height: 160px;
}
}

Worked like a charm!

I just had to insert the code 2 additional times, changing the "section#new-page-1" line of code to the slugs for the other banner pages to fix all of them. 

Thank you!!