I need to set line-height dynamically based on the font size which is controlled from backend

.heading {
  font-size: 6rem;
  line-height: 4rem;
}

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

Here the gap between the text “banner” and Hero is too much as the line height is constant here. How to manage this by adjusting the line height dynamically so that the text doesn’t have too much spacing involved. Also suggest any other best way to achieve this