Different header video banner for mobile

https://tarantula-eagle-c8sz.squarespace.com/stepsurveytest

Password: aps

Thanks in advance with this. I've been trying to have  a separate banner header video play in mobile view and desktop view. 

This is the code I've been using but with no luck:

@media only screen and (max-width: 700px) {
  [data-section-id="66ccb9c8f501485a9b3db8f6"] {
    display: none !xxx;
  } 
}

@media only screen and (min-width: 700px) {
  [data-section-id="66a38deaa873151fbcf8ce2f"] {
    display: none !xxx;
  } 

}

Any help will be greatly appreciated.

Chris

What is the !xxx for? I don't think that looks right, so try this:

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

@media only screen and (min-width: 768px) {
  [data-section-id="66a38deaa873151fbcf8ce2f"] {
    display: none;
  } 

}

I also adjusted the breakpoint so it's at the mobile breakpoint and not overlapping.