Banner issues on mobile

I have been trying to resize my banner images for mobile and I'm having a difficult time.

I was able to get the mobile image loaded for the welcome page using the following css, but I can't hide the image I have loaded for desktop (see image).

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";

/* CSS FOR MOBILE */
@media @mobile {
#welcome-to-modern img {
  display: none;
}

#welcome-to-modern .sqs-block-image img {
  display: block;
}

#welcome-to-modern {
  background: url('https://images.squarespace-cdn.com/content/v1/633b8e53775c0c5c133adeee/67dc4734-6ed0-4ab7-b752-218d76f6878a/welcome+to+modern_square.jpg?format=2500w');
  background-repeat: no-repeat;
  background-size: 100%;
}

Thank you in advance for any help you can give!

Personally, instead of adding the mobile image above the parallax desktop image in that index page, you might add another index page specifically for mobile below the desktop index page.

 After that, hide the first index page for mobile viewing and hide the 2nd index page for desktop viewing.

https://queencityshows.com/

You can use this code to Website > Website Tools > Custom CSS then save & reload the page to resize image on mobile

/* Mobile - homepage - top banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 70px !important;
}

section#welcome-to-modern {
    min-height: unset !important;
    height: 250px !important;
}}

Thank you both for your suggestions!

@DPruitt, I went ahead and built out an additional index page and it worked just fine. 

Thank you again for your time.

Perfect!