Styles removed from code

Hi,

I am following this Google guidance for adding some extra CSS for mobile devices https://support.google.com/adsense/answer/9183363?hl=en#zippy=%2Cexpandable-width-with-fixed-height-example

So according to the guidance, I added this code through the plugin

<style>
@media(max-width: 480px){.resp-ad{max-width: 414px;}}
@media(max-width: 414px){.resp-ad{max-width: 348px;}}
@media(max-width: 375px){.resp-ad{max-width: 329px;}}
@media(max-width: 360px){.resp-ad{max-width: 314px;}} 
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- XXXXXXXX -->
<ins class="adsbygoogle .resp-ad"
     style="display:block"
     data-ad-client="xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script

The class is added to the ads but the style definitions are not applied, I don’t see them anywhere in the frontend. How can I make this work?

The page I need help with: [log in to see the link]