Astro Info

Astro                    v6.4.8
Vite                     v7.3.5
Node                     v25.2.1
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/node (v10.1.4)
Integrations             @astrojs/sitemap (v3.7.3)
                         astro-compressor (v1.3.0)
                         @astrojs/mdx (v6.0.3)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The generated CSS for responsive images uses :where to reduce specificity, but there is no way to wrap it in a @layer. When using layers, styles that are not in a layer override layered styles. This means that the max-width on :where([data-astro-image="constrained"]) overrides all max-widths in all layers:

As a workaround, I removed responsiveStyles: true from my Astro config and instead copied and pasted the CSS into a layered .css file

What's the expected result?

Allow a layer name to be specified.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/astro-bug-17139

Participation

• I am willing to submit a pull request for this issue.