some funky output when using @media (max-width:1200px) { [block] { … } }

Got a new one for you. Seems like when I use a @media query in my inline CSS, it gets cut off prematurely in the output, while it works fine in the editor.

I have a vertical stack group with the following inline style defined:

[block] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  padding-top: 1vw!important;
}

@media (max-width:1919px) {
  [block] {
    padding-top: 10px;
  }
}

The output looks like this:

<style id="pcss-block-pcss-7beda7c1-inline-css">
    .pcss-7beda7c1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        padding-top: 1vw!important
    }

    @media (width </style>
<style id="wp-block-heading-inline-css">
    h1.has-background,h2.has-background,h3.has-background,h4.has-background,h5.has-background,h6.has-background {
        padding: 1.25em 2.375em
    }

It looks good until @media (width </style>

I have not looked at whether or not this is happening in all instances and I have not tried in a vanilla environment yet. I’ll add more info as I look into it.

Thanks!