Google Maps MyMaps IFrame Sizing Issues

Site URL: http://www.whereslewisat.com/walking-the-wainwrights/

Hello I am hoping you can help, I contacted one of your Squarespace team members regarding some issues I was having with a MyMaps map on my site, essentially I was wanting to format it so it was wider than 1240px., Tuanphan gave me some code to put in and it did the trick, however, I am wanting to implement the same principle on another map on site, I was wondering if you could help me identify what needs to change in the existing code has given me and then I can swap out the variable to the new one that's needed for the other map?

This is the code that has allowed me to put the first map into how I wanted it...

----------------

[data-section-id="61edbd4a0e1ca17f505cc2b1"] .content-wrapper {
    max-width: 90% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
[data-section-id="61edbd4a0e1ca17f505cc2b1"] .content-wrapper iframe {
    width: 100% !important;
}
html, body {
    overflow-x: hidden;

-----------------

This below is the Google Maps MyMaps produces in order to embed on my site through iframe, but it is limited in size, this is for my second map

<iframe src="https://www.google.com/maps/d/embed?mid=1z76Ef8zCO849i6amm0Nj3FGijtKACxYu&ehbc=2E312F" width="640" height="480"></iframe>

Can you help me identify what needs to change in the first chunk of CCS in order for it to work on my second map?

For information my site is www.whereslewisat.com

The first map can be found here: https://www.whereslewisat.com/walking-the-wainwrights

The second map can be found here:   https://www.whereslewisat.com/about-me

DId you solve? I think the code should run on both maps

@media screen and (max-width: 767px) {
    iframe[src*="google.com/maps"] {
        width:100% !important;
        height: 500px
    }
}