I'd like to have that outline circle around the word "reality" but it also has to be responsive. The end goal is below.
Currently however, I have what is below.
Since I am using Gutenberg, I do not know how to overlay the image on the given word. I have tried relative CSS (setting the image to relative and adding px to try and fit it). Not only did that not work, it would not be responsive anyways. Is there any custom CSS for me to achieve this?
The following are my blocks turned into CSS:
<div class="wp-block-kadence-column inner-column-1 kadence-column_84ec52-24"><div class="kt-inside-inner-col"><!-- wp:kadence/advancedheading {"level":1,"uniqueID":"_4a3254-47","color":"#333333","size":60,"lineHeight":70,"mobileSize":50,"mobileLineHeight":60,"typography":"Lora","googleFont":true,"fontSubset":"latin","fontVariant":"700italic","fontWeight":"700","topMargin":0,"bottomMargin":10,"markSize":["","",""],"markLineHeight":["","",""],"markPadding":[0,0,0,0],"colorClass":""} -->
<h1 class="kt-adv-heading_4a3254-47 wp-block-kadence-advancedheading" data-kb-block="kb-adv-heading_4a3254-47">We write your<br>ideas into <em>reality</em>.</h1>
<!-- /wp:kadence/advancedheading -->
<!-- wp:kadence/image {"id":1976,"sizeSlug":"full","linkDestination":"none","uniqueID":"_e2485d-a0"} -->
<figure class="wp-block-kadence-image kb-image_e2485d-a0 size-full"><img src="http://emandapen.local/wp-content/uploads/2022/09/Vector.png" alt="" class="kb-img wp-image-1976"/></figure>
<!-- /wp:kadence/image -->
</div></div>
Thanks in advance.