<div class="default">
    <p><b>Default</b></p>
    <div class="component">
      <div class="component-box">
        Component
      </div>
    </div>
  </div>

  <div class="irregular">
    <p><b>Irregular</b></p>
    <div class="component">
      <div class="component-box">
        Component
      </div>
    </div>
  </div>

    .irregular .component {
      --container-irrgular: true;
    }
    .component {
      container-type: inline-size;
    }
    .component-box {
      color: #333;
      padding: 1em;
      font-size: 2rem;
    }

    @container 
      (max-width: 480px) or
      (style(--container-irrgular: true) and (max-width: 800px)) {
      .component-box {
        color: #fff;
        background: #f44;
        font-weight: 700;
      }
    }