About Two-Column Intro

<section class="mx-auto grid w-full max-w-6xl gap-8 bg-white px-4 py-12 md:grid-cols-2 md:gap-16 md:px-6 md:py-16 dark:bg-gray-900" aria-labelledby="abt-intro-title">
  <div>
    <p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">About us</p>
    <h2 id="abt-intro-title" class="mt-3 text-2xl font-bold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
      A small team with an unfashionable habit of finishing things
    </h2>
  </div>
  <div class="space-y-4 leading-[1.75] text-gray-600 dark:text-gray-400 md:pt-2">
    <p>We are a product studio of twelve, spread across nine countries, working with teams who would rather ship one good thing than plan ten.</p>
    <p>The heading sits in its own column so it can run large without crowding the prose, and the two stack cleanly the moment the screen is too narrow to hold both.</p>
  </div>
</section>