Footer: Default

{{#if branded}}
<style>
	:root { --secondary: 0, 126, 204; }
</style>
{{/if}}

<footer class="bg-secondary text-light mt-24">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 py-14 grid sm:grid-cols-12 gap-8 lg:divide-x divide-white/30">
		
		<div class="sm:pr-12 sm:col-span-4 lg:col-span-2">
			<div class="font-bold">Kinetic+</div>
		</div>
		
		<div class="sm:px-12 sm:col-span-8 lg:col-span-5 sm:border-l sm:border-white/30 lg:border-0">
			<div class="font-bold mb-4">Quick links</div>
			<div class="columns-2 gap-6 text-sm">
				<a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">My TRS</a>
				<a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">My Hub</a>
				<a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Company policies</a>
				<a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Another link</a>
				<a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Something else</a>
				<a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">More</a>
			</div>
		</div>
		
		<div class="lg:pl-12 sm:col-span-12 lg:col-span-5 flex justify-between items-start">
			{{#if branded}}
			<div class="flex-shrink-0 flex items-center">
				<span class="text-sm italic mr-2 opacity-50">powered by</span>
			  <img class="h-20 w-auto" src="/assets/img/logo-white.png" alt="">
			</div>
			{{else}}
			<div class="flex-shrink-0 flex items-center">
			  <img class="h-24 w-auto" src="/assets/img/logo-white.png" alt="">
			</div>
			{{/if}}
			
			<a href="#top" class="bg-white rounded-full text-dark w-14 h-14 flex justify-center items-center hover:opacity-80 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-offset-secondary focus:ring-white"><i class="fas fa-chevron-up fa-2x"></i></a>
		</div>
		
		
	</div>
	<div class="bg-dark">
		<div class="max-w-7xl mx-auto px-4 sm:px-6 py-6 text-sm">
			&copy; Towergate Health & Protection 2022
		</div>
	</div>
</footer>