GingerBall_Z

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> ...