Hi there!
I’d recommend some CSS like this, to start:
body.hero-image .hero.with-featured-image, body[class*="front-page"] .hero {
padding-bottom: 20px;
}
That will decrease the padding in the header area a bit, making it shorter. There is some additional padding on the top of the header, but that’s set inline by a bit of javascript, where it’s harder to manipulate.
To add CSS, you can use the Additional CSS panel in the Customizer (assuming you’re running at least WordPress 4.7) or with something like the Jetpack Plugin using the Custom CSS Module.
Let me know if that’s what you were looking for ??