Disabling custom CSS code injection on mobile view

Site URL: https://cobalt-cinnamon-7xg8.squarespace.com

Hello, I've recently customised my slideshow reel gallery block on my home page using the following styles:

<style>
  .gallery-reel {
  height: clamp(75px, 25vw, 200px) !important;
  padding: 50px 50px !important;
}
</style>

However, I've noticed that on mobile view, this actually hides the gallery altogether! When I remove the code, it all works and looks fine, but obviously the formatting is then wrong on the home page. So... 

Is there a way to either make the above code active only on the desktop view, or (inversely) to make the code disabled on mobile view? I was wondering if the @media-something might be useful?

Any recommendations would be hugely appreciated. Thank you!