<section>
<div
class="items-center px-8 py-12 mx-auto max-w-7xl lg:px-16 md:px-12 lg:py-24"
>
<div class="justify-center w-full mx-auto">
<nav aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-2">
<li>
<a
class="text-sm font-medium hover:text-accent-500 duration-300 text-base-600 flex items-center gap-2"
href="#_"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-home size-5"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
<path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
<path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"></path>
</svg>
</a>
</li>
<li>
<a
class="text-sm font-medium hover:text-accent-500 duration-300 text-base-600 flex items-center gap-2"
href="#_"
>
<span>Home</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-5"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</li>
<li>
<a
class="text-sm font-medium hover:text-accent-500 duration-300 text-base-600 flex items-center gap-2"
href="#_"
>
<span>Work</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right size-5"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M9 6l6 6l-6 6"></path>
</svg>
</a>
</li>
<li>
<a
class="text-sm font-medium text-accent-500 duration-300 hover:text-base-900 flex items-center gap-2"
href="#_"
>
<span>Details</span>
</a>
</li>
</ol>
</nav>
</div>
</div>
</section>