Changing the background overlay on one section on mobile only

Site URL: https://triangle-keyboard-t5hz.squarespace.com

Hi - I am changing increase the overlay opacity on the top image on mobile only. This is the code I am using without success.

@media screen and (max-width: 640px) {
 [data-section-id=“609aa62a18656e56660631b2”]  
.section-background .section-background-overlay {
opacity: 0.3;
  }}
 

If anyone can tell me what I am doing wrong that would be great. I am getting a syntax error on the [data.. ] section. 

Thank you.

Password: WLAC

use this code

@media screen and (max-width: 767px) {
    [data-section-id="609aa62a18656e56660631b2"] .section-background-overlay {
        background-color: rgba(0,0,0,0.9) !important;
    }
}

tuanphan can you help me out on css with the same problem on my page: 
powerplatz.kleinws.de  - password: theo2023 

I just want that the header picture is on mobile with a grey overlay color. I tried this one: 
@media screen and (max-width: 767px) {
    [data-section-id="vc_row 344 row-container"] .section-background-overlay {
        background-color: rgba(0,0,0,0.9) !important;
    }

@benkl Can you take a screenshot?

Hi tuanphan thanks for responding. So i just want that on the mobile view there is a filter over the background picture . its difficult to read the text without it. But on desktop there should not be a filter

So this is working: 

@media (max-width: 959px) {
           .main-container .row-container .row-parent  {
                background-color: rgba(0,0,0,0.9) !important;
            }
}

but can you help me that it works only for the header container? 
the class for it called: vc_row 344 row-container

@benkl use this CSS

@media (max-width: 959px) {
          .vc_row[id="344"] .row-parent  {
                background-color: rgba(0,0,0,0.9) !important;
            }
}

tuanphan thank you so much - you are my hero today