Cannot override CSS gradient

[thedivtagguy]

I'm making a website with Hugo and one of the sections requires a flex-box, this is a simple example of what I'm doing:

<div class="flex-container">   
  <div class="photography">
     <h1>Photography</h1>
  </div>
  <div class="art">
  <h1>3D Art</h1>
</div>
</div>

And the CSS is:

flex-container{
display: flex;
flex-flow: row wrap;
padding-left: 100px;
padding-right: 100px;

}

.photography { 
 background: none !important;
  background: no-repeat url("https://thedivtagguy.com/wp-content/uploads/2020/11/InstagramSize.jpg") !important; 
  min-height: 200px;
  flex-basis: 50%;

}

.photography h1 {
  color:white;

}

.art { 

  background:blue;
  min-height: 200px;
  flex-basis: 50%;
}

However, there's this really weird linear gradient which is being applied somewhere in the theme's CSS. I can't seem to be able to override it in any way I know how, is there a way to fix this?

I've uploaded a repo of the entire code here, if that helps.