Using multiple CSS design snippets

Hello, 

Let me preface this by saying I know nothing about CSS and the code I have was copy and pasted from an instructional blog. 

So I needed to adjust my header to fit mobile, found code to do so, and it worked great on that page: 

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

#collection-638502928671157ecff76b37 {
  #page .page-section:nth-of-type(1) {
    img {
      display: none;
    }
    .sqs-block-image img {
      display: block;
    }
    .section-background {
      background: url("https://static1.squarespace.com/static/6192b53f2545b77e9f793c46/t/638fa12a4f194e2bd755600f/1670357293799/X+2023.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}

}

Now I am designing another page and it has the same issue. I want to use the same code with a different pic for a different page. I pasted it the next available line after the code above but nothing is happening. I had a feeling there has to be some sort of code between the two I am unaware of, but I tried anyway (this second page is not published yet). What do I have to do to get the other page to apply this  samecode? Code I want to apply is below. Thanks!

 

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

#COLLECTIONID {#collection-6390dab4bbe47d0784d02319

  #page .page-section:nth-of-type(1) {

    img {

      display: none;

    }

    .sqs-block-image img {

      display: block;

    }

    .section-background {

      background: url("https://static1.squarespace.com/static/6192b53f2545b77e9f793c46/t/6390e4c7f7f76f52acd4228d/1670440139269/GG+2023.png");

      background-repeat: no-repeat;

      background-size: 100%;

    }

  }

}

}

Thank you! I forgot to delete that.