<div class="relative fade-in">
  <div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12  lg:gap-x-8 lg:px-8">
    <div class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6">
      <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
        <p class="text-base/7 font-light text-black tracking-wide">SUBHEADER</p>
        <h1 class="mt-10 text-4xl font-semibold tracking-tight text-black lg:text-6xl">
            This is Hero6.html
        </h1>
        <h2 class="fade-in text-balance lg:text-5xl text-4xl font-normal tracking-tight text-black">This is smaller title h2</h2>
        <p class="mt-8 text-lg font-light text-gray-50 lgl:text-xl">
            Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. 
            Elit sunt amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt.
        </p>
        <div class="mt-10 flex items-center gap-x-6">
            <a href="#" class="rounded-2xl bg-white px-3.5 py-2.5 text-sm font-semibold text-black shadow-xs hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-200">
                Get started
            </a>
            <a href="#" class="text-sm font-semibold text-black hover:text-gray-200">
                Learn more <span aria-hidden="true">→</span>
            </a>
        </div>
    </div>
    </div>
    <div class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0">
      <img class="aspect-3/2 w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto h-full" src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80" alt="">
    </div>
  </div>
</div>
