title: Use multiple conditions for CSS container queries
body: <p><strong>Important - this code only works on browsers with container queries enabled</strong></p>
  <p>How can I use multiple conditions at the same time for container queries? Using the syntax for @media queries doesn't seem to work.</p>
  <p>In this example, the background changes to yellow based on the width and height of the element (resize it to see). But combining the conditions to make the background blue doesn't work.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tile {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    resize: both;
    overflow: auto;
    container-type: size;
    container-name: tile;
  }
  
  .tile__inner {
    width: 100%;
    height: 100%;
  }
  
  @container tile (min-width: 100px) {
    @container tile (min-height: 100px) {
      .tile__inner {
        background: yellow;
      }
    }
  }
  
  @container tile (min-width: 100px) and (min-height: 100px) {
    .tile__inner {
      background: blue !important;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tile"&gt;
    &lt;div class="tile__inner"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>