疑似クラスの:has()を利用して、liタグの余白と色を調整をします。
デモページはこちら

共通のCSSは以下になります。
通常時はulタグにgap: 60pxを指定し、liタグの余白を60pxにします。また、liタグの背景色は#1563adにします。

.ul-parent {
  display: flex;
  gap: 60px;
  margin: 0 0 1em;
}
.li-child {
  flex-grow:  1;
  height: 100px;
  background-color: #1563ad;
}

liタグが4カラム以上になった場合、余白を30pxにします。:has(> :nth-child(4))の「>」は直下セレクタです。

.ul-parent:has(> :nth-child(4)) {
  gap: 30px;
}

試しにliタグを5カラムにしてみます。余白は30pxで変わりません。

次に、liタグが6カラムの時限定で余白を10px、背景色を#ed6464にします。

.ul-parent:has(> :nth-child(6):last-child) {
  gap: 10px;
}
.ul-parent:has(> :nth-child(6):last-child) .li-child {
  background-color: #ed6464;
}

liタグが7カラムになると余白は30px、背景色は#1563adに戻ります。

最後に、直後にクラス名style01があれば背景色を#ed6464にします。:has(+ .style01)の「+」は隣接セレクタです。これで以前は不可能だった兄弟要素の兄要素が指定できます。

.li-child:has(+ .style01) {
  background-color: #ed6464;
}

このように疑似クラス:has()で、特定の子要素を持つ親要素、直後に特定の弟要素を持つ兄要素が指定できます。