wordpress ギャラリーのカラム数をスマホで横３カラム以上にしたい

Question

前提・実現したいこと

wordpressでブログサイトを立ち上げようとしている初心者です。
ギャラリー機能を使って複数の画像を公開しようとしています。
PC・タブレット側では横８枚の画像が並ぶようにしました。
画像を横８枚に並ばせるように、ギャラリーには「fg-1」という追加CSSクラスを持たせました。
CSSに以下を追加することで、同じ大きさの画像８枚が横並びになるようになりました。
(７枚以下の行でも画像の大きさは変わりません)
.fg-1 .blocks-gallery-item .blocks-gallery-grid.columns-8
{
flex-grow: 0;
width: calc((100% - 32px)/3);
margin-right: 16px;
}

発生している問題・エラーメッセージ

スマホ表示にすると、ギャラリーの画像は横２枚にしかなりません。
以下CSSを追加したところ、ギャラリーの画像は縮小・拡大するようになりました。
しかし、ギャラリーは横２枚のままです。
ギャラリーのブロック自体の横幅が縮小されているだけのようです。
ギャラリーの画像を横３枚以上並べたスマホ画面にしたいので、CSSの変更箇所を教えてください。

該当のソースコード

@media screen and (max-width: 700px){
.fg-1 {
width:50%;
}
}

または

@media screen and (max-width: 700px){
.wp-block-gallery {
width:50%;
}
}

●HTML

<figure class="wp-block-gallery columns-8 is-cropped fg-1"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><a href="https:1.jpg"><img src="https:1.jpg" alt="" data-id="361" data-full-url="https:1.jpg" data-link="https:" class="wp-image-361"/></a></figure></li> <li class="blocks-gallery-item"><figure><a href="https:2.jpg"><img src="https:2.jpg" alt="" data-id="362" data-full-url="https:2.jpg" data-link="https:" class="wp-image-362"/></a></figure></li>

試したこと

ギャラリーのカラム数と画像を指定してwidthを変更しました。
カラム数どころかギャラリーブロックに何も影響はでませんでした。
@media screen and (max-width: 700px){
.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,{
float:none;
width:50% !important;
margin:0;
}
}
@media all and (max-width:700px) {
.fg-1 {[?]}
}
※[?]部分で試したコード
width:calc(100%/3 - 30px);
width:calc((100% - 32px)/3);
％やpxの数字はいろいろ変えてみましたが、改善無しです。

補足情報（FW/ツールのバージョンなど）

wordpress5.8.3

ヘッダーに以下を記述してある。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

Answer 1

HTMLのclassを順番に当てはめてみたら上手くいきました。
また、widthではなく、max-widthでないとダメみたいです。
width:calc(100%/6)では画面に変化ありませんでした。

@media screen and (max-width:600px) {
.blocks-gallery-item {
max-width: calc(100%/7);
}
}

Answer 2

スマホの時だと、
width:50%; だと
100% ÷　2 で　２枚になると思います。
3枚にしたいなら
width:calc(100%/3　-(余白）);
4枚にしたいなら
width:calc(100%/4　-(余白）);
とかじゃ駄目ですか？

Comments

[kamigatana]

回答ありがとうございます。
試してみたのですが、画像は２枚のままでギャラリー自体が縮小されてしまいました。
【該当のソースコード】と同じ結果です。
calcは横８枚画像を並べるのに使用しまして、PC・タブレットではちゃんと機能しました。
なぜスマホは同じように並ばないのでしょうか？

[niconic73027793]

html のソースを質問文に追記可能ですか？

[kamigatana]

【試したこと】に追記しました

[niconic73027793]

css しか記載されてないような気がしますが、　書いてあります？

[kamigatana]

失礼しました。ギャラリーのHTMLを画像２枚目の部分まで追記しました。