is--container単体では、効果としては主に contaner-type:inline-size が適用されるだけです。
is--containerLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
.-container:s|m|l クラス、または--contentSzにより、内部のコンテンツ幅を制御できます。
is--container-container:shas--gutterLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
is--container-container:mhas--gutterLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
is--container-container:lhas--gutterLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
is--container--contentSz:320pxLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
is--container は子要素の幅を変数で制御しているため、直下にネストすると子コンテナ自身の幅も（同じ変数名なので）影響を受けます。
is--container-container:mhas--gutterLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
is--container-container:sLorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.
コンテナクエリの判定値は直前の親コンテナの幅になりますが、
.-container:s|m|l は子要素の幅を制限しているだけで、自身の横幅は100%です。
つまり、コンテナクエリの判定値もこの100%サイズが基準となります。
以下の例では、コンテナ直下のdivのサイズは var(--sz--s) ですが、100cqw がそのSサイズになるのではなく、windowサイズと一致します。
is--container-container:sdiv↑ コンテナクエリの適用状態 : @sm~ @md~ @lg~
ここでのコンテナクエリの判定値( cqw )は、外側の 青色の点線 で囲われたコンテナ要素のサイズです。
もし、内部の要素のサイズ（ここでは var(--sz--s)) を 100cqw
となるようにコンテナクエリを内部のdivで使いたい場合は、コンテナ自身のサイズを明示的にSサイズにするか、コンテナをネストします。
以下は、コンテナ自体のサイズを明示的に指定した例です。
is--container-max-w:sdivコンテナクエリ適用状態 : @sm~ @md~ @lg~
以下は、コンテナをネストした例です。
is--container-container:sis--containerコンテナクエリ適用状態 : @sm~ @md~ @lg~