So i make a paragraph with a span for different font size in it (60px only text in span). when it comes to next line it makes a large separates space for first and second line.

      <p>

 <span style="color: var(--orange-yellow-crayola);
            display: inline-block;
            font-size: 60px; position: relative; font-family: GreatVibes-Regular; margin-top: -20px;">I</span>'

so im trying to make a different p and adjust the margin top so the text separates in normal distances, but when im trying to make it responsive with smaller screen device, the span collapse with p because "display:inblock;". had you guys have any solution for this problem? (sorry for bad english)

      <p>
        <span style="color: var(--orange-yellow-crayola);
        display: inline-block;
        font-size: 60px; position: relative; font-family: GreatVibes-Regular; margin-top: -20px;">I'm Creative Director and UI/UX Designer from Sydney, Australia, working in web development and print media.
      </p>

<p style="margin-top: -35px;">I enjoy turning complex problems into simple, beautiful and intuitive designs.
            My job is to build your website so that it is functional and user-friendly but at the same time attractive.
            Moreover, I
            add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring
            across your
            message and identity in the most creative way. I created web design for many famous brand companies.</p>
 

   </section>