is--container

is--container単体では、効果としては主に contaner-type:inline-size が適用されるだけです。

ただし、margin-inline:auto も適用されているので、自身の横幅がセットされている時は中央寄せされます。

is--container (-container: あり)

.-container:s|m|l クラスにより、内部のコンテンツ幅を制御できます。

container要素のネスト

is--container は子要素の幅を変数で制御しているため、直下にネストすると子コンテナ自身の幅も（同じ変数名なので）影響を受けます。

コンテナクエリの挙動について

コンテナクエリの判定値は直前の親コンテナの幅になりますが、 .-container:s|m|l は子要素の幅を制限しているだけで、自身の横幅は100%です。
つまり、コンテナクエリの判定値もこの100%サイズが基準となります。

以下の例では、コンテナ直下のdivのサイズは var(--size-s) ですが、100cqw がそのSサイズになるのではなく、windowサイズと一致します。

ここでのコンテナクエリの判定値( cqw )は、外側の 青色の点線 で囲われたコンテナ要素のサイズです。

もし、内部の要素のサイズ（ここでは var(--size-s)) を 100cqw となるようにコンテナクエリを内部のdivで使いたい場合は、コンテナ自身のサイズを明示的にSサイズにするか、コンテナをネストします。

以下は、コンテナ自体のサイズを明示的に指定した例です。

以下は、コンテナをネストした例です。