@props([
  'items' => [],
  'heading' => null,
])

<div class="space-y-8">
  @if ($heading)
    <p class="text-fg">{{ $heading }}</p>
  @endif
  <ul class="grid grid-cols-1 gap-x-8 gap-y-3">
    @foreach ($items as $item)
      <li class="flex items-center gap-3">
        <span class="flex h-5 w-5 flex-none items-center justify-center rounded-full bg-brand-deep text-[0.6rem] font-semibold text-fg">
          <x-lucide-check class="h-3 w-3" />
        </span>
        <span class="text-fg">{{ $item }}</span>
      </li>
    @endforeach
  </ul>
</div>