Adjusting the height of an Embed block on Mobile Only

Hello – I have recently placed an embed block of an Atlist map on the Squarspace site I'm designing for a client. However, when the site goes to mobile, it maintains the height of the map, cutting off a wide chunk of it. I've tried applying some mobile only settings to it in Custom CSS (@media only screen etc.) but it doesn't seem to budge. Can someone please take a look and see what I'm doing wrong?

Site is: https://tuatara-quillfish-agra.squarespace.com/
Password is: bucharest23

Code I'm using: 

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1677690462239_12054 {
	max-height: 40vh !important;
}
}

Thanks!! 

You'll want to add the max-height to the iFrame rather than applying it to the block.

1 hour ago, Ziggy said:

You'll want to add the max-height to the iFrame rather than applying it to the block.

Oh I see. Is there a way to do this with HTML, I've only ever set this command in CSS so I'm not sure how to re-word it for the iFrame. Thanks!

You need to add the property something like this with the property within the opening <iframe> using style="":

<iframe src="" .......   style="max-height: 40vh;">