title: Why aren't my CSS media queries responding based on my criteria?
body: <p>I have the below media declarations in my CSS</p>
  
  <pre><code>@media all and (max-width: 425px) {
      .Home-image {
          display: none;
      }
  
      .Home-col-1-1 {
          justify-content: space-around;
          background-color: rgba(255, 255, 255, 0.897);
          padding: 2rem;
      }
  
      .Home-col-1 {
          display: flex;
          justify-content: center;
          align-items: center;
          background-image: url('../Home/cocktail-illustration.jpg');
          background-size: contain;
          background-position-y: 110%;
          background-color: #52b6d0;
      }
  }
  
  @media all and (min-width: 768px) {
      .Home-col-1 {
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: blanchedalmond;
      }
  
      .Home-image {
          background-image: url('../Home/cocktail-illustration.jpg');
          background-size: contain;
          background-repeat: no-repeat;
          background-color: #52b6d0;
          background-position-y: 50%;
          background-position-x: 20%;
      }
  }
  </code></pre>
  
  <p>And the content is just displaying as it should under 425px and over 768px. The issue is that what I have specified to appear in (min-width: 768px) does not do so in between 425px and 768px. Can anyone see where the issue might be? :/</p>