@props([
  'services' => [],
])

{{-- Services: grid 2×2 de x-home.service-highlight-card. El contenido (cards)
     lo define la página que consume el componente, no el componente en sí. --}}
<section id="services" class="bg-deep-1">
  <div class="bg-deep-1 grid grid-cols-1 gap-3 lg:gap-6 p-3 lg:p-8 md:grid-cols-2">
    @foreach ($services as $service)
      <x-home.service-highlight-card
        :tag="$service['tag']"
        :title="$service['title']"
        :image="$service['image']"
        :alt="$service['alt']"
        :href="$service['href'] ?? '#'"
        :sub="$service['sub'] ?? null"
      />
    @endforeach
  </div>
</section>