Header style gradient

Site URL: https://hyperboloid-armadillo-c774.squarespace.com/

I have placed a gradient style over the header image in the attached screen shot. My goal was to have the bottom part of the gradient fade down to the section containing the text, with its #343434 background. But as you see, the gradient stops about 1/2 down.

This is the CSS I'm using:

<style>
#collection-627447b62004503f5e79f7ec .header-background-gradient {
background: linear-gradient(180deg, rgba(52,52,52,0) 2%, rgba(52,52,52,1) 100%); }
</style>

Any clues what the problem is here?

Thanks in advance!

Your site is private. Can you setup password & share url again?