{{! Page Heading }}
<div class="page-heading py-6 md:py-12">
  <div class="container">

    {{! Page Title }}
    <div class="mb-2 flex items-baseline gap-x-3 lg:gap-x-4.5">
      <svg
        role="img"
        class="aspect-[6/9] w-3 fill-accent sm:w-4 md:w-5 lg:w-7 xl:w-9"
      >
        <use
          xlink:href="{{root}}assets/img/str1/sprite.svg#arrow-right-pixel"
        ></use>
      </svg>
      <h1
        class="relative mb-3 text-3xl font-bold leading-none tracking-tighter text-gray-900 dark:text-white sm:text-4xl md:text-5xl lg:text-7xl xl:text-[84px]"
      >
        {{page-title}}
      </h1>
    </div>
    {{! Page Title / End }}

    {{! Breadcrumbs }}
    <ol
      class="relative flex flex-wrap gap-x-6 text-sm leading-none text-gray-500 lg:gap-x-8 lg:text-lg [&>li>a]:text-gray-900 hover:[&>li>a]:text-accent dark:[&>li>a]:text-white dark:hover:[&>li>a]:text-accent [&>li]:relative"
    >
      <li class="font-bold">
        <a href="{{root}}_str1-index.html">Home</a>
        <svg
          role="img"
          class="fill-gray absolute -right-4 top-1/2 aspect-[3/5] w-1.5 -translate-y-1/2 lg:-right-5"
        >
          <use
            xlink:href="{{root}}assets/img/str1/sprite.svg#arrow-right-pixel-alt"
          ></use>
        </svg>
      </li>
      {{#each breadcrumbs}}
        {{#if @last}}
          <li>{{label}}</li>
        {{else}}
          <li class="font-bold">
            <a href="{{link}}.html">{{label}}</a>
            <svg
              role="img"
              class="fill-gray absolute -right-4 top-1/2 aspect-[3/5] w-1.5 -translate-y-1/2 lg:-right-5"
            >
              <use
                xlink:href="{{root}}assets/img/str1/sprite.svg#arrow-right-pixel-alt"
              ></use>
            </svg>
          </li>
        {{/if}}
      {{/each}}
    </ol>
    {{! Breadcrumbs / End }}

  </div>
</div>
{{! Page Heading / End }}