Atro v 4.0.8

having a parent Astro components which call Child Astro component and I am passing HTML string to child Astro Component and it is works using set:html.

now I want to add css to that html element then how to do this

parent.astro

 <Child title="Child" description="text with html element <mark> marked data </mark>"/>

child.astro

---
const { title, description } = Astro.props;
---

<section>
  <h1>{title}</h1>
  <span set:html={description} />
</section>

<style>
  h1 {
    text-transform: capitalize;
    font-size: 3rem;

  span {
    & mark {
      padding-inline: 0.5rem;
      font-style: italic;
      color: blue;
    }
  }
</style>

but this style of mark doen’r getting applie, checking in firefox and chrome latest version

How can we apply the css without using importing global.css