@media query not working with 2 display: none; tags

so i made a website and i used 2 divs, 1 has all the code for the desktop layout and one has all the code for mobile, i did this and would like to keep it this way for future changes,

on both divs display is default and on the media quearys i have it set as this ,

/* DESKTOP AND MOBILE VEIWPORT TOGGLE */

@media screen and (max-width: 1024px) {
  .desktop {
    display: none;
  }

  @media screen and (max-width: 100vw) {
    .mobile {
      display: none;
    }
  }
}

also all of my code can be found here with the html https://codesandbox.io/s/soph2?file=/css/index.css:244-451 also sorry if this was a stupid question, im 13 and iv only been coding for a year now.

when i go on a mobile devided the desktop veiw does not show but neither does any of my mobile code, please help me, thank you very much! also i just noticed whehn on the desktop mode, the mobile div shows up too for somereason under the footer.

(EDIT) here the link to the site live https://soph2.csb.app/