How to have a different background colour between desktop and mobile version of a specific section on a page.

Site URL: https://caper-gerbil-de7g.squarespace.com/espanol/productos

Hi

I found resources to change the background colours for the entire site, but not for just one particular page.

The page only has one section besides the header and footer sections. The background colour of that unique section is #A1C0A7. I want the section in question to have the colour #F1F7F2 on the mobile version. How can I make that change with a CSS code and can I make it without knowing the section's ID?

I tried this, but it did nothing:

section {
    background-color: #A1C0A7;
}
@media screen and (max-width: 640px) {
    section {
        background-color: #F1F7F2;
    }
}

Password is riviera

Thanks.

The site is private, you can follow this guide then we can check easier