@props([
    'image',
    'title',
    'description',
])

<section class="py-24 bg-green-50">

    <div class="max-w-7xl mx-auto px-6">

        <div class="grid md:grid-cols-2 gap-12 items-center">

            <img
                src="{{ $image }}"
                class="rounded-2xl shadow-xl">

            <div>

                <span class="text-green-700 font-semibold">

                    FEATURED OUTREACH

                </span>

                <h2 class="text-4xl font-bold mt-4">

                    {{ $title }}

                </h2>

                <p class="mt-6 text-lg text-gray-700">

                    {{ $description }}

                </p>

                {{ $slot }}

            </div>

        </div>

    </div>

</section>