<script lang="ts">
	import { RULES } from '$lib/data/content';
	import SectionHeader from './SectionHeader.svelte';
	import Icon from './Icon.svelte';
</script>

<section class="section section--tight" id="rules">
	<div class="wrap">
		<SectionHeader
			coord="03"
			eyebrow="Trail rules"
			title="Entry criteria at a glance"
			lede="The things every submission needs. Tick them off and you’re on the board."
		/>
		<div class="rules" style="margin-top:40px">
			{#each RULES as r, i (r.t)}
				<div class="rule">
					<div class="rule__check"><Icon name="check" size={15} sw={2.4} /></div>
					<div class="rule__n">REQ-0{i + 1}</div>
					<h4 class="display" style="font-size:20px;margin-top:6px;font-stretch:108%">{r.t}</h4>
					<p style="color:var(--ink-soft);margin-top:8px;font-size:14.5px">{r.d}</p>
				</div>
			{/each}
		</div>
	</div>
</section>
