@props([
    'title' =>
        'Desa dengan mayoritas penduduknya sebagai <span class="text-secondary-200">Petani</span>.',
    'description' => '<span class="font-semibold">
                Apakah kamu tahu bahwa Bilanrengi adalah desa yang mayoritas penduduknya adalah
                petani?
            </span>
            Ya, Bilanrengi adalah desa yang memiliki lahan pertanian yang tersebar dan bervariasi.
            Sebagian besar penduduknya adalah petani yang menggarap lahan pertanian mereka sendiri.',
    'picture' =>
        'https://images.pexels.com/photos/2253815/pexels-photo-2253815.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
])

<x-grid class="w-full md:grid-cols-5 gap-4">
    <x-stack class="gap-3 md:gap-6 md:col-span-3">
        <x-landing.title class="max-w-md">
            {!! $title !!}
        </x-landing.title>
        <x-text>
            {!! $description !!}
        </x-text>
    </x-stack>

    <x-image
        :src="$picture"
        class="object-cover w-full h-full max-h-64 md:col-span-2 rounded-lg"
        style="object-position: 0% 20%"
    />

</x-grid>