About Image Story

<section class="mx-auto grid w-full max-w-6xl items-center gap-10 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-imgstory-title">
  <div>
    <p class="text-xs font-bold uppercase tracking-widest text-blue-700 dark:text-blue-400">Where we came from</p>
    <h2 id="abt-imgstory-title" class="mt-3 text-2xl font-bold leading-tight tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">
      A studio, not a software factory
    </h2>
    <p class="mt-4 max-w-prose leading-[1.75] text-gray-600 dark:text-gray-400">
      We began as two people who were tired of shipping things nobody asked for. That has not changed, only the number of us.
    </p>
    <p class="mt-4 max-w-prose leading-[1.75] text-gray-600 dark:text-gray-400">
      Every engagement still starts the same way: in a room, with the hard question nobody wants to name first.
    </p>
  </div>

  <!-- A CSS gradient stands in for a photograph: no asset to load, still a filled media panel at any width. -->
  <div class="relative flex aspect-[4/3] w-full items-center justify-center overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 via-indigo-500 to-violet-600" aria-hidden="true">
    <span class="text-7xl font-black tracking-tight text-white/90">A</span>
    <span class="pointer-events-none absolute -right-8 -top-8 h-40 w-40 rounded-full bg-white/15"></span>
    <span class="pointer-events-none absolute -bottom-10 -left-10 h-48 w-48 rounded-full bg-black/10"></span>
  </div>
</section>