Feature Row code

@props([
    'eyebrow' => null,
    'title',
    'reverse' => false,
])

@php
    /*
    | Alternating feature block: copy on one side, a visual (the `media` slot) on
    | the other. Set `reverse` to flip the order on large screens. Bullet points
    | can be supplied via the default slot.
    |
    | Usage:
    |   <x-ui.feature-row eyebrow="Deploy" title="Push to deploy" reverse>
    |       Body copy and bullets…
    |       <x-slot:media><x-ui.window>…</x-ui.window></x-slot:media>
    |   </x-ui.feature-row>
    */
@endphp

<div {{ $attributes->merge(['class' => 'grid items-center gap-10 lg:grid-cols-2 lg:gap-16']) }}>
    <div class="min-w-0 {{ $reverse ? 'lg:order-2' : '' }}">
        @if ($eyebrow)
            <p class="text-sm font-semibold uppercase tracking-[0.12em] text-brand-600 dark:text-brand-400">{{ $eyebrow }}</p>
        @endif
        <h3 class="mt-3 text-2xl sm:text-3xl font-semibold tracking-tight text-gray-900 dark:text-white text-balance">{{ $title }}</h3>
        <div class="mt-4 text-base leading-relaxed text-gray-600 dark:text-gray-400">
            {{ $slot }}
        </div>
    </div>

    <div class="min-w-0 {{ $reverse ? 'lg:order-1' : '' }}">
        {{ $media }}
    </div>
</div>