@props(['number', 'title', 'subtitle', 'description', 'first' => false])
<article @class([
    'relative isolate border-t border-white/15 pt-8 md:border-t-0 md:pt-0',
    'md:border-l md:border-white/15 md:pl-12' => !$first,
]) data-reveal>
    <span class="pointer-events-none absolute -top-3 right-0 -z-10 select-none font-display text-[6rem] italic leading-none text-white/[.06] md:text-[7.5rem]" aria-hidden="true">{{ $number }}</span>
    <span class="text-xs font-semibold tracking-[.2em] text-white/40">STEP {{ $number }}</span>
    <h3 class="mt-4 font-display text-3xl uppercase tracking-wide">{{ $title }}</h3>
    <p class="mt-3 text-sm font-semibold uppercase tracking-[.08em] text-white/70">{{ $subtitle }}</p>
    @if($description)<p class="mt-4 max-w-xs leading-7 text-white/55">{{ $description }}</p>@endif
</article>