---
import Picture from "~/components/astro/utils/Picture.astro";
const {} = Astro.props;
---

<section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-6xl">
  <div class="grid gap-6 row-gap-10 md:grid-cols-2">
    <div class="md:py-6 md:pr-16 text-gray-700 dark:text-gray-400">
      <div class="flex">
        <div class="flex flex-col items-center mr-4">
          <div>
            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-5 h-5 text-gray-600 dark:text-slate-200"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
                >
                </path>
              </svg>
            </div>
          </div>
          <div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
        </div>
        <div class="pt-1 pb-8">
          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 1</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
            risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce
            sit amet dui tellus.
          </p>
        </div>
      </div>
      <div class="flex">
        <div class="flex flex-col items-center mr-4">
          <div>
            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-5 h-5 text-gray-600 dark:text-slate-200"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
                >
                </path>
              </svg>
            </div>
          </div>
          <div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
        </div>
        <div class="pt-1 pb-8">
          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 2</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
            risus tempus nulla, sed porttitor est nibh at nulla.
          </p>
        </div>
      </div>
      <div class="flex">
        <div class="flex flex-col items-center mr-4">
          <div>
            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-5 h-5 text-gray-600 dark:text-slate-200"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M15 4v8h3.586a1 1 0 0 1 .707 1.707l-6.586 6.586a1 1 0 0 1 -1.414 0l-6.586 -6.586a1 1 0 0 1 .707 -1.707h3.586v-8a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1z"
                >
                </path>
              </svg>
            </div>
          </div>
          <div class="w-px h-full bg-gray-300 dark:bg-slate-500"></div>
        </div>
        <div class="pt-1 pb-8">
          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Step 3</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi
            risus tempus nulla, sed porttitor est nibh at nulla.
          </p>
        </div>
      </div>
      <div class="flex">
        <div class="flex flex-col items-center mr-4">
          <div>
            <div class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-6 text-gray-600 dark:text-slate-200"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                stroke-width="2"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M5 12l5 5l10 -10"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="pt-1">
          <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300">Ready!</p>
          <p class="text-gray-700"></p>
        </div>
      </div>
    </div>
    <div class="relative">
      <Picture
        class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
        src={import("~/assets/images/astronaut.jpg")}
        widths={[400, 768]}
        sizes="(max-width: 768px) 100vw, 432px"
        alt="Astronaut"
        aspectRatio="432:768"
      />
    </div>
  </div>
</section>
