having below css file and imported in Astro but container query does not seem to work; also tries the :is-inline directive within .Astro file but it doesnt getting applied

panel.css

main {
  container-type: inline-size;
  container-name: main;
  display: grid;
  min-height: 100vh;
  background-color: black;
  border: 1.5rem solid rgb(222, 21, 21);
  outline: 0.5rem solid khaki;
  outline-offset: 2ch;
  height: 80dvh;
  margin: 2rem;
}

@container (min-width <=200px) {
  main {
    margin: 20rem;
    background-color: whitesmoke;
    border-color: black;
  }
}

panel.astro

---
import "panel.css";
---

<style is:inline>
  /* inline: relative & npm package imports are not supported. */
  main { 
    container-type: inline-size;
    container-name: main;
    border: 0.5rem outset pink;
    outline: 0.5rem solid khaki;
    box-shadow: 0 0 0 2rem skyblue;
    border-radius: 12px;
    font: bold 1rem sans-serif;
    margin-block: 5rem;
    margin-inline: 5rem;
    padding: 1rem;
    outline-offset: 0.5rem;
    height: 40dvh;
  }

</style>
<main></main>