{{# Checklist with Image Section #}}
<section class="py-16 full-bleed {{ bg_color == 'light' ? 'bg-[#f7f8fa]' : 'bg-white' }}">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col {{ image_position == 'right' ? 'md:flex-row' : 'md:flex-row-reverse' }} items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="{{ image_position == 'right' ? 'fade-right' : 'fade-left' }}">
                {{ if title }}
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ title }}
                </h2>
                {{ /if }}
                {{ if subtitle }}
                <p class="text-[#696687] mb-3 font-semibold">{{ subtitle }}</p>
                {{ /if }}
                {{ if body }}
                <p class="text-[#696687] mb-6 leading-relaxed">{{ body }}</p>
                {{ /if }}
                {{ if check_items }}
                <ul class="space-y-3">
                    {{ check_items }}
                    <li class="flex items-start gap-3">
                        <i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i>
                        <span class="text-[#696687] leading-relaxed">{{ text }}</span>
                    </li>
                    {{ /check_items }}
                </ul>
                {{ /if }}
                {{ if button_text }}
                <a href="{{ button_url ?? '/{ current_locale }/registration' }}"
                   class="btn-primary inline-block px-8 py-3 rounded-md text-sm mt-6">
                    {{ button_text }}
                </a>
                {{ /if }}
            </div>
            {{ if image }}
            <div class="md:w-1/2" data-aos="{{ image_position == 'right' ? 'fade-left' : 'fade-right' }}">
                <img src="{{ image:url }}" alt="{{ title }}" class="w-full max-w-lg mx-auto float-bob">
            </div>
            {{ /if }}
        </div>
    </div>
</section>