▼テンプレート
[OS] Windows
[ブラウザ] Edge
[現象] スマホでスライダーを表示するときレスポンシブではなくスマホ用の画像で表示させたいです。
どのような設定をCSS追加をすればいいのでしょうか

画像に
<img class="pc" src="（画像パス）">
<img class="sp" src="（画像パス）">

↑ここはこのように並べていいのでしょうか

CSS
/* パソコン表示用 */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマホ表示用 */
@media only screen and (max-width: 768px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

これを
/public_html/html/template/default/assets/css
style.css に書いて上書きしてみましたが
パソコン用とスマホ用の画像が続いて出てきてしまいました。