CSS to hide section for responsive design

I have a background video for my desktop. However, it doesn't work for my mobile background... so I made a vertical version.

https://laserlight.house/

As per direction I read on a previous post to this feed, I have duplicated the section and added the mobile version in there.

Then I put the following css in custom css in settings, but now it shows the desktop video on the desktop (yay!), but both videos on mobile (boo!).

@media screen and (max-width:1024px) {
  [section-data-section-id="63f92211ba57b758b1a91dd2"] {
    display: none !important;
  }
}

@media screen and (min-width:1025px) {
  [data-section-id="63fcc92ea4186c086c767f8b"] {
    display: none !important;
  }
}

What code is wrong? 

Desktop Showing 1 Video:

Mobile Showing 2 Videos:

Need site login detail. can't fix without seen the code.

You can try the following code to hide the first video on mobile

@media only screen and (max-width: 1024px) {
  section[data-section-id="63f92211ba57b758b1a91dd2"] {
    display: none;
  }
}

Support me by pressing 👍  or marking as the solution if this is useful for you

My testing