---
import BaseLayout from '../layouts/BaseLayout.astro';

import ContactCTA from '../components/ContactCTA.astro';
import Hero from '../components/Hero.astro';
---

<BaseLayout title="About | Jeanine White" description="About Jeanine White Lorem Ipsum">
	<div class="stack gap-20">
		<main class="wrapper about">
			<Hero
				title="About"
				tagline="Thanks for stopping by. Read below to learn more about myself and my background."
			>
				<img
					width="1553"
					height="873"
					src="/assets/at-work.jpg"
					alt="Jeanine White at work with a colleague"
				/>
			</Hero>

			<section>
				<h2 class="section-title">Background</h2>
				<div class="content">
					<p>
						Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy.
						Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl condimentum
						id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla
						pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare.
					</p>
					<p>
						Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis
						natoque penatibus. Cras fermentum odio eu feugiat pretium nibh. Proin nibh nisl
						condimentum id venenatis. Porta nibh venenatis cras sed felis eget velit. Id diam vel
						quam elementum pulvinar etiam non.
					</p>
					<p>
						Ultrices tincidunt arcu non sodales neque sodales ut. Sed enim ut sem viverra aliquet
						eget sit amet. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra.
						Viverra accumsan in nisl nisi scelerisque eu ultrices. In massa tempor nec feugiat nisl
						pretium fusce.
					</p>
				</div>
			</section>
			<section>
				<h2 class="section-title">Education</h2>
				<div class="content">
					<p>Corporis voluptates tenetur laudantium.</p>
				</div>
			</section>
			<section>
				<h2 class="section-title">Skills</h2>
				<div class="content">
					<p>officia unde omnis</p>
				</div>
			</section>
		</main>

		<ContactCTA />
	</div>
</BaseLayout>

<style>
	.about {
		display: flex;
		flex-direction: column;
		gap: 3.5rem;
	}

	img {
		margin-top: 1.5rem;
		border-radius: 1.5rem;
		box-shadow: var(--shadow-md);
	}

	section {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		color: var(--gray-200);
	}

	.section-title {
		grid-column-start: 1;
		font-size: var(--text-xl);
		color: var(--gray-0);
	}

	.content {
		grid-column: 2 / 4;
	}

	.content :global(a) {
		text-decoration: 1px solid underline transparent;
		text-underline-offset: 0.25em;
		transition: text-decoration-color var(--theme-transition);
	}

	.content :global(a:hover),
	.content :global(a:focus) {
		text-decoration-color: currentColor;
	}

	@media (min-width: 50em) {
		.about {
			display: grid;
			grid-template-columns: 1fr 60% 1fr;
		}

		.about > :global(:first-child) {
			grid-column-start: 2;
		}

		section {
			display: contents;
			font-size: var(--text-lg);
		}
	}
</style>
