@props([
    'title' => '',
    'description' => '',
    'image' => [
      'desktop' => '',
      'mobile' => '',
    ],
    'alt' => '',
    'position' => 'left', // 'left' or 'right'
    'loading' => 'lazy',
    'decoding' => 'async',
])

@php
  $isImageLeft = $position === 'left';
  $imageOrder = $isImageLeft ? 'lg:order-1' : 'lg:order-2';
  $contentOrder = $isImageLeft ? 'lg:order-2' : 'lg:order-1';
@endphp

<div class="mb-8 flex flex-wrap items-center gap-0 lg:mb-20 lg:flex-nowrap lg:gap-8 xl:gap-12">
  <!-- Image Column -->
  <div class="{{ $imageOrder }} relative order-2 flex-auto mt-5 md:mt-0">
    <picture class="block overflow-hidden" title="{!!$alt . ' - ' . config('company.name')!!}">
      <source srcset="{{ $image['mobile'] }}" media="(max-width: 768px)" />
      <img src="{{ $image['desktop'] }}" alt="{{ $alt }}"
        class="aspect-video h-full max-h-[400px] w-full object-cover object-center lg:max-h-none lg:min-w-[500px]"
        width="792" height="445" loading="{{ $loading }}" decoding="{{ $decoding }}">
    </picture>
  </div>

  <!-- Content Column -->
  <div class="{{ $contentOrder }} order-1 flex-auto lg:max-w-xl lg:py-4">
    <h3 class="text-primary-blue-variant mb-2 text-center leading-tight lg:text-left text-2xl">
      {{ $title }}
    </h3>
    <div class="text-balance text-center  text-base leading-relaxed text-gray-700 lg:text-wrap lg:text-left">
      {{ $description }}
    </div>
  </div>
</div>