The page has two sliders. How to implement correctly so that the first slider is only on the mob. version, and the second at all?

Question

css

I have been studying layout on my own for several months now, but I ran into a misunderstanding, and there is no one to ask.
There are two sliders on the page, the slider itself is implemented in a separate BEM block, since these sliders are outwardly identical. How can you make the first slider only on the mobile version, and the second one on all, with the smallest code in css? I myself decided to do it this way, in css all elements of the Slider block are implemented with double nesting, i.e. Slider Slider__element and in JS when changing the viewport I delete the Slider class (for the first block, which is a slider in the mobile version) and the slider styles are canceled . But I don’t really like this solution, because I have to use JS for such a trifle ...
(I hope I put it clearly, because I can’t attach the code, because it’s on a working machine)