Container with image not responding to CSS

I can’t get rid of the space in the hero container that holds the hero image no matter what CSS I apply. This page is being built in an Astra theme with Spectra in WordPress.

Here is the current version of the CSS that I am working with to change the height of the hero container.

/* Hero Image and Text section */

/* Remove spacing from outer container */
.hero-gradient-container {
width: 100%;
max-width: 100%;
padding: 0 !important;
margin: 0 !important;
position: relative;
display: block;
}

/* Ensure hero image block fills the space / .hero-gradient-container .hero-image.alignfull, .hero-image { width: 100vw; max-width: 100vw; margin: 0 !important; padding: 0 !important; display: block; object-fit: cover; / or contain, depending on use / height: auto; / or set a fixed height like 100vh if needed */
}

.hero-image {
margin-top: 0;
margin-bottom: 0;
display: block; /* remove default inline gap */
}

.hero-text {
position: absolute;
top: 35%; /* move up / left: 10%; / move left / transform: translateY(-50%); / vertical centering only / z-index: 10; display: flex; flex-direction: column; align-items: flex-start; / stack left-aligned */
text-align: left;
color: white;
}

.hero-text > * {
margin-bottom: 1rem;
}

.hero-text > *:last-child {
margin-bottom: 0;
}

The page I need help with: [log in to see the link]