<section class="mx-4 my-6 grid max-w-[90rem] grid-cols-1 justify-center gap-12 lg:mx-auto lg:grid-cols-[repeat(auto-fit,minmax(30rem,1fr))]">
  <div class="flex items-center justify-end">
    <img
      class="mx-auto aspect-[1/0.7] w-full rounded-md object-cover sm:aspect-[1/0.5] sm:object-top lg:aspect-[1.25/1] lg:max-w-[33rem]"
      src="https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      alt="Building websites" />
  </div>
  <div class="flex flex-col items-start justify-center gap-8 text-slate-950 dark:text-slate-50 sm:gap-10">
    <h3 class="text-3xl font-bold sm:max-w-[80%] sm:text-4xl">Taco makes it easy to build websites</h3>
    <div class="space-y-3 [&>p]:text-base [&>p]:font-bold [&>p]:before:mr-2 [&>p]:before:content-['\2713']">
      <p>Buit with tailwind</p>
      <p>Dark mode</p>
      <p>Responsive at any screen</p>
    </div>
    <button
      aria-label="go to components"
      class="group flex items-center justify-between rounded bg-slate-950 px-5 py-3 font-semibold text-slate-50 focus-visible:outline focus-visible:outline-slate-950/40 dark:bg-slate-50 dark:text-slate-950">
      Components
      <span class="ml-1 h-5 w-5 translate-y-[0.15rem] transition-transform group-hover:translate-x-2">
        <!-- prettier-ignore -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg>
      </span>
    </button>
  </div>
</section>

   <section
      class="mx-4 my-6 grid max-w-[90rem] grid-cols-1 items-center justify-start gap-6 lg:mx-auto lg:grid-cols-[repeat(auto-fit,minmax(30rem,1fr))] lg:gap-4">
      <div class="order-2 flex items-center justify-start overflow-hidden">
        <img
          class="aspect-[1/0.7] w-full rounded-md object-cover max-lg:mx-auto sm:aspect-[1/0.5] lg:mr-auto lg:aspect-[1.25/1] lg:max-w-[33rem]"
          src="https://images.pexels.com/photos/326503/pexels-photo-326503.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          alt="Building websites" />
      </div>
      <div
        class="order-1 my-auto flex w-fit flex-col items-start justify-center gap-8 self-end text-slate-950 dark:text-slate-50 sm:gap-10 lg:ml-auto lg:px-4">
        <h3 class="max-w-[80%] text-3xl font-bold sm:text-4xl">Taco makes it easy to build websites</h3>
        <div class="space-y-3 [&>p]:text-base [&>p]:font-bold [&>p]:before:mr-2 [&>p]:before:content-['\2713']">
          <p>Buit with tailwind</p>
          <p>Dark mode</p>
          <p>Responsive at any screen</p>
        </div>
        <button
          aria-label="go to components"
          class="group flex items-center justify-between rounded bg-slate-950 px-5 py-3 font-semibold text-slate-50 focus-visible:outline focus-visible:outline-slate-950/40 dark:bg-slate-50 dark:text-slate-950">
          Components
          <span class="ml-1 h-5 w-5 translate-y-[0.15rem] transition-transform group-hover:translate-x-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="5" y1="12" x2="19" y2="12"></line> <polyline points="12 5 19 12 12 19"></polyline> </svg>
          </span>
        </button>
      </div>
    </section>