swiperにデフォルトで設定されているtransformを消したい

Question

実現したいこと

transformのscaleでswiperの画像サイズを小さくしたいのですがtransformを消すことができない

前提

スワイパーで3枚のスライド表示し、真ん中(active状態)以外の左右2枚だけをtransform: scale();で小さくしたいです。
そのため.swiper-slide-prevと.swiper-slide-nextにtransform: scale();を設定したのですが、transform: translateZ(0)というスタイルがデフォルトで設定されており、transform: scale();がかき消されてしまいうまくできません(画像参照)
ブラウザの検証画面よりtransform: translateZ(0)のチェックを外すとscaleがうまく適応されたのでこれさえ消せれば...という感じなのですが...

該当のソースコード

.swiper-backface-hidden .swiper-slide {
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

試したこと

.swiper-backface-hiddenと.swiper-slideにtransform: none;を設定する
swiperをjsより前で読み込んでいるか確認

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

必要な情報があれば追記します

Answer 1

CSSのセレクタには詳細度というものがあります。詳細度が高いものが優先されます。

詳細度 - CSS: カスケーディングスタイルシート | MDN

scale の詳細度を上げればどうでしょう。例えば、

.swiper-backface-hidden .swiper-slide-prev, .swiper-backface-hidden .swiper-slide-next{
  transform: scale(.8);
}

Comments

[obito]

解決できました、ありがとうございます。
詳細度という概念を完全に忘れていました。
もう少し勉強したいと思います。