steps

<section className="bg-gray-300">
<div className="px-4 py-16 bg-gray-300 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
  <div className="grid gap-6 row-gap-10 lg:grid-cols-2">
    <div className="lg:py-6 lg:pr-16">
      <div className="flex">
        <div className="flex flex-col items-center mr-4">
          <div>
            <div className="flex items-center justify-center w-10 h-10 border rounded-full">
              <svg className="w-4 text-gray-600" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
                <line fill="none" strokeMiterlimit={10} x1={12} y1={2} x2={12} y2={22} />
                <polyline fill="none" strokeMiterlimit={10} points="19,15 12,22 5,15" />
              </svg>
            </div>
          </div>
          <div className="w-px h-full bg-gray-300" />
        </div>
        <div className="pt-1 pb-8">
        <p className="mb-2 text-lg font-bold">Step 1</p>
          <p className="mb-2 text-lg font-bold">Getting to know you</p>
          <p className="text-gray-700">
          We love people! It's our pleasure to connect with you and learn more about your organization, staff, and specific challenges.
          </p>
        </div>
      </div>
      <div className="flex">
        <div className="flex flex-col items-center mr-4">
          <div>
            <div className="flex items-center justify-center w-10 h-10 border rounded-full">
              <svg className="w-4 text-gray-600" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
                <line fill="none" strokeMiterlimit={10} x1={12} y1={2} x2={12} y2={22} />
                <polyline fill="none" strokeMiterlimit={10} points="19,15 12,22 5,15" />
              </svg>
            </div>
          </div>
          <div className="w-px h-full bg-gray-300" />
        </div>
        <div className="pt-1 pb-8">
        <p className="mb-2 text-lg font-bold">Step 2</p>
          <p className="mb-2 text-lg font-bold">ORGANIZATIONAL AUDIT</p>
          <p className="text-gray-700">
          We take the time to carefully assess the equity-rooted pain points in your organization
          </p>
        </div>
      </div>
      <div className="flex">
        <div className="flex flex-col items-center mr-4">
          <div>
            <div className="flex items-center justify-center w-10 h-10 border rounded-full">
              <svg className="w-4 text-gray-600" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
                <line fill="none" strokeMiterlimit={10} x1={12} y1={2} x2={12} y2={22} />
                <polyline fill="none" strokeMiterlimit={10} points="19,15 12,22 5,15" />
              </svg>
            </div>
          </div>
          <div className="w-px h-full bg-gray-300" />
        </div>
        <div className="pt-1 pb-8">
          <p className="mb-2 text-lg font-bold">Step 3</p>
          <p className="mb-2 text-lg font-bold">DOCUMENTS VERIFICATION</p>
          <p className="text-gray-700">
          We analyze our organizational audit findings and craft a tailored plan to help move your organization from understanding equity in theory, to action.
          </p>
        </div>
      </div>
      <div className="flex">
        <div className="flex flex-col items-center mr-4">
          <div>
            <div className="flex items-center justify-center w-10 h-10 border rounded-full">
              <svg className="w-4 text-gray-600" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
                <line fill="none" strokeMiterlimit={10} x1={12} y1={2} x2={12} y2={22} />
                <polyline fill="none" strokeMiterlimit={10} points="19,15 12,22 5,15" />
              </svg>
            </div>
          </div>
          <div className="w-px h-full bg-gray-300" />
        </div>
        <div className="pt-1 pb-8">
        <p className="mb-2 text-lg font-bold">Step 4</p>
          <p className="mb-2 text-lg font-bold">LONG-TERM ACCOUNTABILITY</p>
          <p className="text-gray-700">
          We build close relationships with our clients and offer the opportunity to remain connected for the long-haul--to provide accountability and trouble-shooting as challenges during the long-term equity journey arise
          </p>
        </div>
      </div>
      <div className="flex">
        <div className="flex flex-col items-center mr-4">
          <div>
            <div className="flex items-center justify-center w-10 h-10 border rounded-full">
              <svg className="w-6 text-gray-600" stroke="currentColor" viewBox="0 0 24 24">
                <polyline fill="none" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit={10} points="6,12 10,16 18,8" />
              </svg>
            </div>
          </div>
        </div>
        <div className="pt-1">
          <p className="mb-2 text-lg font-bold">Success</p>
          <p className="text-gray-700" />
        </div>
      </div>
    </div>
    <div className="relative">
      <img className="inset-0 object-cover object-bottom w-full rounded shadow-lg h-96 lg:absolute lg:h-full" src="https://images.pexels.com/photos/3184287/pexels-photo-3184287.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt />

    </div>
  </div>
</div>

</section>