Shape Mask on an img in a code block

I want to add a shape mask to an image within a code block. I added a clip-path style to my css and the masking works when I view the page in edit mode but doesn't work at all on the live site. Here's the code of the block.

<style>
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap');

.text-wrap-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 15px;
  overflow: hidden;
}

.text-wrap--text {
  text-align: justify;
}

.text-wrap--image img {
  width: 450px; /* Adjust the width of the image */
  height: auto;
  float: left;
  margin-right: 20px; /* Adjust the gap between text and image */
  clip-path: url(#svgPathNewtv);
}
  .text-wrap--text p::first-letter {
  font-size: 1.5em; /* Adjust the font size of the drop cap */
  float: left;
  margin-right: 2px; /* Adjust the space between the drop cap and the text */
  font-weight: bold; /* Optionally make the drop cap bold */
  font-family: 'Antic Didone', serif; /* Use Antic Didone font */
  }

</style>

<div class="text-wrap-container">
  <div class="text-wrap--image">
    <img src="https://images.squarespace-cdn.com/content/65c68b06cf997117009a14c1/329c890e-955f-4363-98b3-848630d5b40b/SpaceG_02.png" alt="Space Image">
  </div>
...

Replace ... with </div>