Casper 5.8 - Cover / banner height in desktop screens

New ghost install, currently experimenting with a basic blog design.

I am trying to reduce the height of the of the “cover” or banner section of casper which in my desktop screen (4K monitor) looks hugely tall. Like so (this is after a slight reduction I could achieve with code injection, see below):

As mentioned with code injection and based on some prior answers in the forum I could reduce the “out-of-the-box” heigh but only a tiny bit (roughly 5%) , using this code:

<style>
 
  @media (min-width: 768px){
    .site-header-content {
      min-height: 100px !important;
      max-height: 300px;
      }
    }
</style>

I noticed that whatever I set in max-height is just ignored if it’s less than approximately 600px

Any idea of how to override whatever is taking over the max-height in this case?

Here is my site if you want to take a look: https://arielpablo.net