title: Cannot override CSS gradient
body: <p>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:</p>
  <pre><code>&lt;div class=&quot;flex-container&quot;&gt;   
      &lt;div class=&quot;photography&quot;&gt;
          &lt;h1&gt;Photography&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class=&quot;art&quot;&gt;
          &lt;h1&gt;3D Art&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And the CSS is:</p>
  <pre><code>flex-container{
      display: flex;
      flex-flow: row wrap;
      padding-left: 100px;
      padding-right: 100px;
  }
  
  .photography { 
      background: none !important;
      background: no-repeat url(&quot;https://thedivtagguy.com/wp-content/uploads/2020/11/InstagramSize.jpg&quot;) !important; 
      min-height: 200px;
      flex-basis: 50%;
  }
  
  .photography h1 {
      color:white;
  }
  
  .art { 
      background:blue;
      min-height: 200px;
      flex-basis: 50%;
  }
  </code></pre>
  <p>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?</p>
  <p>I've uploaded a repo of the entire code <a href="https://github.com/thedivtagguy/gallery" rel="nofollow noreferrer">here</a>, if that helps.</p>
  <p><a href="https://i.stack.imgur.com/7LacN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7LacN.png" alt="enter image description here" /></a></p>