Responsive Hero Heading with Bio Paragraph

<div class="lg:col-span-7">
          <h1 class="leading-none text-gray-900 tracking-tight">
            <span class="block text-[12vw] sm:text-[10vw] md:text-[8vw] lg:text-[7vw] font-semibold">
              <span data-letter="" style="display: inline-block; transform: translateY(0px); opacity: 1;" class="tracking-tighter">Jordan</span>
              <span class="block"></span>
              <span data-letter="" style="display: inline-block; transform: translateY(0px); opacity: 1;" class="tracking-tighter">Lee</span>
            </span>
          </h1>
          <p class="sm:mt-5 sm:text-3xl leading-relaxed max-w-2xl mix-blend-luminosity brightness-200 text-base text-gray-700 tracking-tight mt-4">
            Product Designer &amp; Frontend Engineer crafting clear, performant interfaces for ambitious teams. I blend systems thinking, accessibility, and motion to ship useful, beautiful work.
          </p>
</div>