<div
  class="
    flex flex-col
    px-4
    w-full
    max-w-6xl
    mx-auto
    mt-10
    space-y-12
    md:space-y-0 md:flex-row
  "
>
  <div class="flex flex-col space-y-6 md:w-1/2">
    <h2
      class="
        font-heading
        text-4xl
        font-bold
        text-center text-muted-800
        dark:text-white
        max-w-md
        md:text-left
      "
    >
      What's different about Mistral?
    </h2>
    <p
      class="
        font-sans
        max-w-sm
        text-center text-muted-500
        dark:text-muted-400
        md:text-left
      "
    >
      Mistral provides all the functionality your team needs, without the
      complexity. Our software is tailor-made for modern digital product teams.
    </p>
  </div>

  <!-- Numbered List -->
  <div class="flex flex-col space-y-8 md:w-1/2">
    <!-- List Item -->
    <div class="flex flex-col space-y-2 md:space-y-0 md:space-x-6 md:flex-row">
      <!-- Heading -->
      <div class="rounded-l-full bg-primary-500 md:bg-transparent">
        <div class="flex items-center space-x-2">
          <div
            class="
              font-sans
              px-4
              py-2
              text-white
              rounded-full
              md:py-1
              bg-primary-500
            "
          >
            01
          </div>
          <h3
            class="
              font-heading
              text-base
              font-bold
              text-white
              dark:text-white
              md:mb-4 md:hidden
            "
          >
            Hire top 5% candidates
          </h3>
        </div>
      </div>

      <div>
        <h3
          class="
            hidden
            mb-4
            font-heading
            text-lg
            font-bold
            text-muted-800
            dark:text-white
            md:block
          "
        >
          Hire top 5% candidates
        </h3>
        <p class="font-sans text-muted-500 dark:text-muted-400">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est
          igitur, inquit, quod requiras? Quicquid enim a sapientia
          proficiscitur, id continuo debet expletum esse omnibus.
        </p>
      </div>
    </div>

    <!-- List Item -->
    <div class="flex flex-col space-y-2 md:space-y-0 md:space-x-6 md:flex-row">
      <!-- Heading -->
      <div class="rounded-l-full bg-primary-500 md:bg-transparent">
        <div class="flex items-center space-x-2">
          <div
            class="
              font-sans
              px-4
              py-2
              text-white
              rounded-full
              md:py-1
              bg-primary-500
            "
          >
            02
          </div>
          <h3
            class="
              font-heading
              text-base
              font-bold
              text-white
              dark:text-white
              md:mb-4 md:hidden
            "
          >
            Manage and track careers
          </h3>
        </div>
      </div>

      <div>
        <h3
          class="
            hidden
            mb-4
            font-heading
            text-lg
            font-bold
            text-muted-800
            dark:text-white
            md:block
          "
        >
          Manage and track careers
        </h3>
        <p class="font-sans text-muted-500 dark:text-muted-400">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est
          igitur, inquit, quod requiras? Quicquid enim a sapientia
          proficiscitur, id continuo debet expletum esse omnibus.
        </p>
      </div>
    </div>

    <!-- List Item -->
    <div class="flex flex-col space-y-2 md:space-y-0 md:space-x-6 md:flex-row">
      <!-- Heading -->
      <div class="rounded-l-full bg-primary-500 md:bg-transparent">
        <div class="flex items-center space-x-2">
          <div
            class="
              font-sans
              px-4
              py-2
              text-white
              rounded-full
              md:py-1
              bg-primary-500
            "
          >
            03
          </div>
          <h3
            class="
              font-heading
              text-base
              font-bold
              text-white
              dark:text-white
              md:mb-4 md:hidden
            "
          >
            Keep turnover rates low
          </h3>
        </div>
      </div>

      <div>
        <h3
          class="
            hidden
            mb-4
            font-heading
            text-lg
            font-bold
            text-muted-800
            dark:text-white
            md:block
          "
        >
          Keep turnover rates low
        </h3>
        <p class="font-sans text-muted-500 dark:text-muted-400">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid est
          igitur, inquit, quod requiras? Quicquid enim a sapientia
          proficiscitur, id continuo debet expletum esse omnibus.
        </p>
      </div>
    </div>
  </div>
</div>
