@props(['quote', 'name', 'number' => null, 'variant' => 'light', 'reveal' => true])
<figure @class([
    'group flex min-h-96 flex-col p-7 transition duration-300 md:p-9',
    'border border-grey-200 bg-ivory hover:-translate-y-1 hover:bg-white' => $variant === 'light',
    'border border-white/15 bg-white/[.04] text-warm-white hover:-translate-y-1 hover:border-white/35 hover:bg-white/[.07]' => $variant === 'dark',
]) @if($reveal) data-reveal @endif>
    <div class="flex items-start justify-between">
        <span aria-hidden="true" @class(['font-display text-7xl leading-[.65]', 'text-grey-400' => $variant === 'light', 'text-white/35' => $variant === 'dark'])>“</span>
        @if($number)<span @class(['text-[10px] font-semibold tracking-[.18em]', 'text-grey-400' => $variant === 'light', 'text-white/40' => $variant === 'dark'])>{{ str_pad($number, 2, '0', STR_PAD_LEFT) }}</span>@endif
    </div>
    <blockquote class="mt-10 text-lg leading-8">{{ $quote }}</blockquote>
    <figcaption @class(['mt-auto border-t pt-7 text-xs font-semibold uppercase tracking-[.13em]', 'border-grey-200 text-grey-600' => $variant === 'light', 'border-white/15 text-white/55' => $variant === 'dark'])>{{ $name }}</figcaption>
</figure>