@props(['title', 'description', 'thumbnail', 'link'])

<a href="{{ $link }}"
  class="group block rounded-lg bg-white shadow-lg transition-shadow duration-300 ease-in-out hover:shadow-xl">
  <div class="flex">
    {{-- Thumbnail --}}
    <div class="flex flex-shrink-0 overflow-hidden md:aspect-square md:w-1/2">
      <img src="{{ $thumbnail }}" alt="{{ $title }} Thumbnail" class="w-full transform object-cover">
    </div>
    <div class="flex flex-1 flex-col justify-center p-6">
      <h3
        class="text-primary-blue-variant group-hover:text-primary mb-2 text-xl font-bold transition-colors duration-300 ease-in-out">
        {{ $title }}</h3>
      <p class="text-base leading-relaxed text-gray-700">{{ $description }}</p>
      <span class="text-primary mt-4 font-semibold group-hover:underline">See Class &rarr;</span>
    </div>
  </div>
</a>