<?php

$elements = get_field('element');
?>


<div class="container mx-auto pb-10">
    <div class="liste_item flex flex-col md:grid md:grid-cols-2 gap-5 md:gap-12 lg:gap-x-44 lg:gap-y-20  scroll-appear">
        <?php
        if (is_array($elements)) {
            foreach ($elements as $index => $item) {
                $lien = $item['lien'];
                $img = $item['image'];
                $EvenOrOdd = $index % 2 ? 'odd' : 'even';
                if (is_array($lien)) {
        ?>
                    <a href="<?php echo $item['lien']['url']; ?>" target="<?php echo $item['lien']['target']; ?>"
                        class="item scroll-appear relative block <?php echo $EvenOrOdd; ?>">
                        <div class="head md:mb-6">
                            <?php echo wp_get_attachment_image($img['id'], 'large', false, ['class' => 'scroll-appear  scroll-appear-image object-cover']); ?>
                            <div class="layer opacity-40 bg-black md:hidden"></div>
                            <span
                                class="text heading-text text-white absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2  mx-auto w-[70%] text-center block md:hidden"><?php echo $item['lien']['title']; ?></span>
                        </div>
                        <span class="arrow_btn hidden md:flex items-start">
                            <span class="icon ">
                                <svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.7058 4.82328C14.9011 4.62802 14.9011 4.31144 14.7058 4.11617L11.5239 0.934193C11.3286 0.738931 11.012 0.738931 10.8168 0.934193C10.6215 1.12945 10.6215 1.44604 10.8168 1.6413L13.6452 4.46973L10.8168 7.29815C10.6215 7.49342 10.6215 7.81 10.8168 8.00526C11.012 8.20052 11.3286 8.20052 11.5239 8.00526L14.7058 4.82328ZM0.352295 4.96973H14.3523V3.96973H0.352295V4.96973Z"
                                        fill="black" />
                                </svg>
                            </span>
                            <span class="text heading-text text-[17px] leading-normal "><?php echo $item['lien']['title']; ?></span>
                        </span>
                    </a>
        <?php
                }
            }
        }
        ?>
    </div>

</div>