.is--wrapper {
  // 子要素の制御
  --contentSize: var(--sz--m, 100%);
  > * {
    max-inline-size: min(100%, var(--contentSize)); // min ないとimg要素等がはみ出す
    margin-inline: auto;
  }
}

// Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
.-contentSize\:s {
  --contentSize: var(--sz--s);
}

.-contentSize\:l {
  --contentSize: var(--sz--l);
}