Potřebuji zmenšit nebo změnit velikost písma nadřazené třídy na základě velikosti písma značky span v podřízené třídě

<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))))
   }
   })

Zde mohu odstranit pouze prostor pod značkou span, ale ne prostor nad značkou span. Pomozte prosím odstranit totéž