@props([
    'number' => 0,
    'title' => '',
    'description' => '',
    'titleClass' => '',
    'descriptionClass' => '',
    'img' => [
      'url' => '',
      'alt' => '',
      'class' => '',
    ]
])
<div {{ $attributes->merge(['class' => 'flex flex-col-reverse md:flex-row-reverse lg:flex-col gap-4']) }}>
  @if(!empty($img['url']))
    <picture class="flex justify-center h-full w-full max-h-28 lg:flex-[1_0_auto] min-w-44">
      <img src="{{ $img['url'] }}" alt="{{ $img['alt'] }}" class="h-full w-full object-contain {{ $img['class'] ?? "" }}">
    </picture>
  @endif
  <div class="mx-auto flex max-w-none md:max-w-[424px] gap-3 md:gap-4 w-full">
    <div class="flex-shrink-0 text-center">
      <span
        class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-sky-900 text-lg font-semibold text-sky-900 md:h-10 md:w-10 md:text-xl">
        {{ $number }}
      </span>
    </div>
    <div class="flex min-w-0 flex-col">
      <h3 class="{{ $titleClass }} mb-2 text-xl font-semibold md:text-2xl">{{ $title }}</h3>
      <p class="{{ $descriptionClass }} text-base leading-tight md:text-lg">{{ $description }}</p>
    </div>
  </div>
</div>