@props([
    'title' => '',
    'description' => '',
    'imageUrl' => '',
    'imageAlt' => '',
    'imageClass' => '',
])
<div class="container">
  <div class="mb-8 text-center">
    <h2 class="title-section-blue-variant mb-6">{{ $title }}</h2>
    <div class="bg-primary mx-auto mb-8 h-1 w-24"></div>
    <p class="mx-auto max-w-4xl text-xl italic text-gray-700 md:text-[22px]">
      {{ $description }}
    </p>
  </div>
</div>
<picture class="block w-full overflow-x-hidden" title="{!!$imageAlt . " - " . config('company.name')!!}">
  <img src="{{ $imageUrl }}" width="800" height="600" alt="{{ $imageAlt }}"
    class="h-[40vh] min-h-64 w-full object-cover object-center {{ $imageClass }}" loading="lazy" decoding="async" />
</picture>
<div class="container px-8 pt-12 lg:pt-20">
  {{ $slot }}
</div>