Container (is--container)

// コンテナ定義 + 併用クラスで内部のコンテンツ幅を制御する。
.is--container {
  container-type: inline-size;
}

// 最外側の is--container 直下の子要素にだけ --sz--bleed を 100cqi で上書きする。
//   Memo: .is--container:not(:where(.is--container .is--container)) を使ってもいいがわかりにくいので、以下のようにしている
.is--container > * {
  --sz--bleed: 100cqi;
}
.is--container.has--gutter > * {
  // has--gutterがある場合はその分を加算
  --sz--bleed: calc(100cqi + var(--gutter-size) * 2);
}
.is--container .is--container > * {
  // --sz--bleed は一番先祖(最外側) の is--container で値をセットしたらあとは引き継ぐだけ
  --sz--bleed: inherit;
}