{%- set title = title ?? '' -%}
{%- set eyebrow = eyebrow ?? '' -%}

<div class="relative z-20 px-5 pt-5 pb-10">

    {% if eyebrow %}
    <p class="text-[10px] font-bold uppercase tracking-[0.14em] mb-2 leading-none"
       style="color: rgb(var(--index-accent-rgb));
              opacity: clamp(0, calc(1 - var(--p) * 4), 1);
              transform: translateY(calc(var(--p) * -6px))">
        {{- eyebrow -}}
    </p>
    {% endif %}

    <h1 class="text-[30px] font-black text-stone-900 dark:text-stone-50 leading-none"
        style="opacity: clamp(0, calc(1 - var(--p) * 1.8), 1);
               transform: translateY(calc(var(--p) * -12px))">
        {{- title -}}
    </h1>

    {% if subtitle is defined and subtitle %}
        <p class="text-sm text-stone-500 dark:text-stone-400 mt-2 leading-snug max-w-[20rem]"
            style="opacity: clamp(0, calc(1 - var(--p) * 2.2), 1)">
            {{- subtitle -}}
        </p>
    {% endif %}

</div>