Change List Section Slide background image- mobile ONLY

Site URL: https://www.newconductorsorchestra.org

Hello SQSP forum,

I am trying to change the second slide banner slideshow background only on mobile to another uploaded image. 

I think I've figured out how to isolate the second slide -- I've been able to put a border on it!-- but don't know how to upload the image itself.

Here's code I have so far 

@media only screen and (max-width: 640px){ 

 #collection-61e9e0f678724a292e138438
  {
    .list-item[data-is-card-enabled="true"]:nth-child(2) {img:url(https://static1.squarespace.com/static/61e9e0a1c56e13742a1a45a4/t/6321e7846d4fcd546b6acafa/1663166341170/SQSP+mobile+background+image+for+conductors.png)!important; background-repeat:no-repeat!important; background-size:cover!important; background-position: center!important;}
  }

}

Any help is greatly appreciated! Thank you!

To keep things simple, I would probably use two images and hide one on desktop and hide the other on mobile--or whatever you want.

Use @media as you did in your example:

@media only screen and (max-width: 640px){

 and then:

    display:none;