<header class="mb-8 flex flex-col items-center gap-8 bg-zinc-900 py-8 text-zinc-400">
	<div>
		<a href="/" class="flex items-center gap-4">
			<enhanced:img src="/static/logoCircle.png?w=90" class="w-12" alt="Bomanza Transport Oy" />
			<h1 class="text-xl font-bold lg:text-2xl">Bomanza Transport Oy</h1>
		</a>
	</div>
	<div class="flex flex-col items-center gap-2 md:flex-auto md:flex-row">
		<span class="info">RUNKOLIIKENNE</span><span class="info">KOTI- JA ULKOMAANAJOT</span>
	</div>
	<nav>
		<ul class="flex items-center gap-8">
			<li><a href="/">Etusivu</a></li>
			<li><a href="/kalusto">Kalusto</a></li>
			<li><a href="/ota-yhteytta">Ota yhteyttä</a></li>
		</ul>
	</nav>
</header>

<style lang="postcss">
	@import url('https://fonts.cdnfonts.com/css/capture-it');

	.info {
		font-family: 'Capture It', sans-serif;
		@apply text-sm lg:text-xl;
	}

	li {
		@apply text-lg hover:text-zinc-200;
	}
</style>
