CSS Media Queries not being properly implemented by Salesforce Marketing Manager Layout Builder

Question

I am creating a landing page using the Salesforce Marketing Manager Layout Builder. The page houses an iframe which contains Salesforce dynamic content, and has CSS styles that are written in the Layout Template HTML file, and the majority of styles are applied as expected. However, for some reason media queries are being misinterpreted.

For example I have the following media query as a test:

@media (max-width: 800px) {
  #foo {
    background-color: red;
  }
}

@media (max-width: 900px) {
  #foo {
    background-color: blue;
  }
}

The result is that #foo has a blue background no matter how wide or narrow the browser is. Also, any attempt to include (min-width) automatically disables the media query. For example:

@media (min-width: 600px) and (max-width: 900px) {
  #foo {
    background-color: blue;
  }
}

Yields no background color no matter how wide or narrow the browser is. I'm totally stuck and not sure how to proceed, would greatly appreciate any insight. Thanks!