---
import { Icon } from 'astro-icon';
import { Picture } from '@astrojs/image/components'
---

<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-primary-600 border-2">
							<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
						</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 class="text-gray-600 dark:text-slate-400">
						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-primary-600 border-2">
							<Icon name="tabler:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
						</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 class="text-gray-600 dark:text-slate-400">
						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:arrow-down" class="w-6 h-6 text-primary-600 dark:text-slate-200" />
						</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 class="text-gray-600 dark:text-slate-400">
						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 bg-primary-600">
							<Icon name="tabler:check" class="w-6 h-6 text-white dark:text-slate-200" />
						</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-600 dark:text-slate-400"></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>
