{% extends 'layouts/base' %}

{% block content %}

	<section class="container relative z-10 flex items-center justify-center flex-1 py-12 xl:py-20">
					<section class="mx-auto grid w-full max-w-5xl grid-cols-1 items-center gap-8 md:grid-cols-[2fr_3fr] lg:grid-cols-2 xl:gap-24">
						<article>
							<img class="block object-contain w-1/2 max-w-xs mx-auto md:w-full lg:mr-0 lg:w-2/3" src="../assets/broken-tooth.svg" alt="">
						</article>
						<article class="text-center md:text-left">
							<h1 class="font-bold text-150 text-imperial">
								Oops
							</h1>
							<h3 class="mt-3 text-60 text-imperial">
								Something's broken.
							</h3>
							<p class="mt-6 text-24">
								We're sorry, it looks like the page you're
								looking for doesn't exist in our system.
							</p>
							<div class="flex items-center justify-center gap-8 mt-12 md:justify-start xl:mt-16">
								<button class="pBtn">Contact Us</button>
								<button class="tBtn group">
									<img class="transition-all group-hover:translate-x-1" src="../assets/icons/chevron-right-bordered.svg" alt="">
									<span>About Us</span>
								</button>
							</div>
						</article>
					</section>
				</section>

{% endblock content %}