{!--
  Reusable hero/breadcrumb banner.
  Pass these via {embed="embeds/embed_partial_section_banner" title="..." parent_label="..." parent_url="..." crumb="..." image="{site_url}assets/img/blog-header.jpg" overlay="0.6"}
--}
<section class="relative isolate overflow-hidden bg-cover bg-center bg-no-repeat py-32 sm:py-40"
  style="background-image: linear-gradient(rgba(3,7,18,0.{embed:overlay_top}), rgba(3,7,18,0.{embed:overlay_bottom})), url('{embed:image}');">
  <div class="gf-container">
    <nav class="text-xs uppercase tracking-[0.2em] text-primary-300/80">
      {if "{embed:parent_label}" != ""}<a href="{embed:parent_url}" class="hover:text-primary-200">{embed:parent_label}</a>
      <span class="px-2 text-white/40">/</span>{/if}
      <span class="text-white/80">{embed:crumb}</span>
    </nav>
    <h1 class="gf-heading-1 mt-4 text-white">{embed:title}</h1>
    {if "{embed:subtitle}" != ""}<p class="mt-3 max-w-2xl text-base text-white/70">{embed:subtitle}</p>{/if}
  </div>
</section>