【2022改訂版】Among Us等で複数人を横に並べるCSS書いてみた(アモングアス)

だいぶニッチなネタではありますが、最近流行のAmongUs。
これを配信にて

OBSというツールを用い
Discordで通話を行い
Discord StreamKit Overlayで通話画面を構成したい

という人に向けたものになっています。
AmongUsが16日より最大15人対応になるということもあり、簡単にですが複数人対応用のCSSを書いてみました。
※2022.12.18改定しました。
Discordの仕様変更により使えなくなっていたCSSを改良しました。
以前のCSSは使用できませんのでこちらに差し替えをお願いいたします。
・横並びをGridへ変更。幅によって自動で人数がかわるように。

たくさんの人数を横に並べるCSS

まず御託はいいからCSSだけくれという人のためにCSSのみ先に記載します。
使い方は後ほど

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: transparent;
}

div[class*=Voice_voiceContainer] ul[class*=Voice_voiceStates] {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, 240px);
  gap: 50px 40px;
}
div[class*=Voice_voiceContainer] ul[class*=Voice_voiceStates] li[class*=Voice_voiceState] {
  display: inline-block;
  height: auto;
  aspect-ratio: 1/1;
  text-align: center;
}
div[class*=Voice_voiceContainer] ul[class*=Voice_voiceStates] li[class*=Voice_voiceState] img[class*=Voice_avatar] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: none;
  filter: brightness(0.55);
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
div[class*=Voice_voiceContainer] ul[class*=Voice_voiceStates] li[class*=Voice_voiceState] img[class*=Voice_avatarSpeaking] {
  filter: brightness(1);
  border: none;
}
div[class*=Voice_voiceContainer] ul[class*=Voice_voiceStates] li[class*=Voice_voiceState] div[class*=Voice_user] {
  text-align: center;
  padding-top: 20px;
}
div[class*=Voice_voiceContainer] ul[class*=Voice_voiceStates] li[class*=Voice_voiceState] div[class*=Voice_user] span[class*=Voice_name] {
  line-height: 1.4;
}

※旧コードは現状のカスタムCSSとしては使用できないため削除

しかしCSSの書き方としては無理やりな感じなのでちょっと気持ちいいコードではないですね…OBSのブラウザが対応してくれればもっといい書き方ができるのですが…