Alternating showcase

Build an alternating feature showcase with Tailwind CSS: two rows where the text and the media panel swap sides. Each row is a two-column grid on lg with a text block (eyebrow, heading, paragraph, bullet list, link) and a rounded media placeholder. Use order utilities to flip the second row. Stack vertically on mobile with the media on top.

<section class="mx-auto max-w-6xl space-y-20 px-6 py-16">
  <!-- Row 1 -->
  <div class="grid items-center gap-10 lg:grid-cols-2">
    <div>
      <p class="text-sm font-medium uppercase tracking-wide text-neutral-400">Automation</p>
      <h3 class="mt-2 text-2xl font-semibold text-neutral-900">Put the busywork on autopilot</h3>
      <p class="mt-3 text-neutral-500">Trigger actions from any event and let rules do the rest.</p>
      <ul class="mt-4 space-y-2 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Visual rule builder</li>
        <li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> 200+ triggers</li>
      </ul>
      <a href="#" class="mt-5 inline-block text-sm font-medium text-neutral-900 hover:underline">Learn more →</a>
    </div>
    <div class="aspect-video rounded-2xl bg-neutral-100"></div>
  </div>
  <!-- Row 2 (flipped) -->
  <div class="grid items-center gap-10 lg:grid-cols-2">
    <div class="aspect-video rounded-2xl bg-neutral-100 lg:order-1"></div>
    <div class="lg:order-2">
      <p class="text-sm font-medium uppercase tracking-wide text-neutral-400">Insights</p>
      <h3 class="mt-2 text-2xl font-semibold text-neutral-900">See what actually moves the needle</h3>
      <p class="mt-3 text-neutral-500">Dashboards that update in real time, no setup required.</p>
      <a href="#" class="mt-5 inline-block text-sm font-medium text-neutral-900 hover:underline">Learn more →</a>
    </div>
  </div>
</section>