{{# Numbered List 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 == 'left' ? 'md:flex-row' : 'md:flex-row-reverse' }} items-center gap-10 lg:gap-16">
            {{ if image }}
            <div class="md:w-1/2" data-aos="{{ image_position == 'left' ? 'fade-right' : 'fade-left' }}">
                <img src="{{ image:url }}" alt="{{ title }}" class="w-full max-w-lg mx-auto float-bob">
            </div>
            {{ /if }}
            <div class="md:w-1/2" data-aos="{{ image_position == 'left' ? 'fade-left' : 'fade-right' }}">
                {{ if title }}
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ title }}
                </h2>
                {{ /if }}
                {{ if intro }}
                <p class="text-[#696687] mb-6 leading-relaxed">{{ intro }}</p>
                {{ /if }}
                {{ if items }}
                <ol class="ha-problem-list space-y-4">
                    {{ items }}
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">{{ index | add:1 }}</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ text }}</span>
                    </li>
                    {{ /items }}
                </ol>
                {{ /if }}
            </div>
        </div>
    </div>
</section>