---
import Icon from './Icon.astro';
---

<section class="box skills">
	<div class="stack gap-2 lg:gap-4">
		<Icon icon="terminal-window" color="var(--accent-regular)" size="2.5rem" gradient />
		<h2>Full Stack</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
	</div>
	<div class="stack gap-2 lg:gap-4">
		<Icon icon="trophy" color="var(--accent-regular)" size="2.5rem" gradient />
		<h2>Industry Leader</h2>
		<p>Neque viverra justo nec ultrices dui. Est ultricies integer quis auctor elit.</p>
	</div>
	<div class="stack gap-2 lg:gap-4">
		<Icon icon="strategy" color="var(--accent-regular)" size="2.5rem" gradient />
		<h2>Strategy-Minded</h2>
		<p>Urna porttitor rhoncus dolor purus non enim praesent ornare.</p>
	</div>
</section>

<style>
	.box {
		border: 1px solid var(--gray-800);
		border-radius: 0.75rem;
		padding: 1.5rem;
		background-color: var(--gray-999_40);
		box-shadow: var(--shadow-sm);
	}

	.skills {
		display: flex;
		flex-direction: column;
		gap: 3rem;
	}

	.skills h2 {
		font-size: var(--text-lg);
	}

	.skills p {
		color: var(--gray-400);
	}

	@media (min-width: 50em) {
		.box {
			border-radius: 1.5rem;
			padding: 2.5rem;
		}

		.skills {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rem;
		}

		.skills h2 {
			font-size: var(--text-2xl);
		}
	}
</style>