I need to reduce or alter the font size of parent class based on the font size of span tag inside child class

<div class="heading">
  <p>Hero<br>
<span style="font-size:20px;">Banner</span><br>
Text</p>
</div>

.heading {
  font-size: 8.4rem;
  line-height: 7.56rem;
}

const elements = document.body.querySelectorAll("*[style]")
elements.forEach(element=>{
 if(element.style.fontSize){
   const {value: size, unit} = element.attributeStyleMap.get('font-size')
   element.attributeStyleMap.set('line-height', CSS[unit](Math.floor(size * (8.4/7.56))))
   }
   })

Here I can remove only the space below the span tag but not the space above the span tag. Please help to remove the same

Comments

[Bram Hammer]

You could use css variables.
So for example

:root { --fs: 8.5rem; }
.heading {
    font-size: calc( --fs * 3 );
}
.heading p span {
    font-size: --fs;
}

And change the --fs value for certain screen sizes?