<section class="container mx-auto py-8 md:py-28 relative before:content-leafsGreen before:absolute before:top-0 before:right-0 xs:before:hidden">
    <h2 class="font-heading before:content-flower2 text-4xl md:text-7xl mt-4 mb-4 md:mb-16 flex items-center before:pt-2">
        <?php the_sub_field('section_heading'); ?>
    </h2>
    <div class="section-repeater md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-x-24 lg:gap-x-12 gap-y-12 mb-16">
        <?php if (have_rows('item_repeater')) : ?>
            <?php while (have_rows('item_repeater')) : the_row(); ?>
                <div class="section-repeater-item flex-column mb-20 md:mb-8">
                    <div class="section-repeater-item-image grid place-items-center w-full h-auto mb-4 after:content-leafsRounded relative after:absolute after:right-0 lg:after:mr-[-80px] xl:after:mr-[-14px] 2xl:after:mr-0 after:top-2 xs:after:hidden">
                        <img class="rounded-full object-cover object-center h-40 md:w-50 lg:w-72 w-40 md:h-50 lg:h-72 mb-4" src="<?php $image = the_sub_field('item_image'); ?>" alt="">
                    </div>
                    <p class="text-center">
                        <?php the_sub_field('item_text'); ?>
                    </p>
                </div>
            <?php endwhile; ?>
        <?php endif; ?>
    </div>
    <p class="text-center mb-9">
        <?php the_sub_field('section_text'); ?>
    </p>
    <div class="cta flex">
        <a class="mx-auto btn" href="<?php the_sub_field('cta') ?>">
            <?php the_sub_field('cta_text'); ?>
        </a>
    </div>
</section>