---
import { Icon } from "astro-icon";
import Picture from "~/components/core/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:pb-6 md:pr-16">
      <h2 class="mb-8 text-3xl lg:text-4xl font-bold font-heading">
        Sed ac magna sit amet risus tristique interdum. hac.
      </h2>
      <div class="flex">
        <div class="flex flex-col items-center mr-4">
          <div>
            <div class="flex items-center justify-center w-10 h-10 rounded-full border-secondary-500 border-2">
              <Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
            </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 rounded-full border-secondary-500 border-2">
              <Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
            </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 rounded-full border-secondary-500 border-2">
              <Icon name="tabler:arrow-down" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
            </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 rounded-full border-primary-600 border-2">
              <Icon name="tabler:check" class="w-6 h-6 text-gray-600 dark:text-slate-200 icon-bold" />
            </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>