@props([
    'title' => 'What You\'ll Learn in Pool School:',
    'items' => [],
])
<div class="w-full py-7 md:py-12">
  <div class="w-full border-y border-[#D5D5D5] bg-[#fbfbfb] p-6 md:p-10">
    <h3 class="title-section-blue-variant mb-3 text-2xl font-semibold">
      <i class="fa-regular fa-graduation-cap"></i>
      {{ $title }}
    </h3>
    {{-- <ul class="grid list-disc grid-cols-1 gap-x-8 gap-y-4 pl-5 text-lg leading-relaxed text-gray-700 md:grid-cols-2">
      @foreach ($items as $item)
        <li>{{ $item }}</li>
      @endforeach
    </ul> --}}
    <ul class="columns-1 md:columns-2 gap-8 text-lg leading-relaxed text-gray-700">
      @foreach ($items as $item)
        <li class="break-inside-avoid mb-4">
          <div class="flex items-start gap-2">
            <span class="mt-3 h-1.5 w-1.5 rounded-full bg-gray-600 flex-shrink-0"></span>
            <span>{{ $item }}</span>
          </div>
        </li>
      @endforeach
    </ul>
  </div>
</div>