Custom desktop only and mobile only slideshow is conflicting with my image banner please help

Hi! I have a custom mobile only and desktop only slideshow image setup in theme editor where adding a second slideshow to my theme acts as the mobile slideshow and is hidden on desktop, while the first is hidden on mobile.

The problem is it is conflicting with my custom mobile and desktop image banner code, and now the image banner code will not work because they both use the class .banner__media:first-child, and the block and none display cancel eachother out. Here is the code below:

component-slideshow-css

image-banner-css

Any ideas? thank you so much.

Here’s my store:

try-nellies-boutique.myshopify.com

password: lavishprintshop

@kirstenlc5

Please share your store URL!

Thanks!

Not sure if that is what you want.
Can “:nth-child” help you?

https://www.w3schools.com/CSSref/sel_nth-child.php