<?php 

    $list = get_sub_field('list');
    $i = 1;
?>

    <div class="container">
    <?php foreach($list as $list_item): ?> 
        <div class="osms__card osms__card_<?php echo $i ?> card mt-60 wow animate__animated animate__slideInUp" data-wow-delay="1s">
        <?php if(!empty($list_item['link'])):?>
        <a href="<?php echo esc_html($list_item['link']); ?>">
        <div class="osms__card-headline">
                <svg
                    width="48"
                    height="48"
                    viewBox="0 0 48 48"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g clip-path="url(#clip0_0_3988)">
                    <path
                        d="M38 6H10C7.79 6 6.02 7.79 6.02 10L6 38C6 40.21 7.79 42 10 42H38C40.21 42 42 40.21 42 38V10C42 7.79 40.21 6 38 6ZM36 28H28V36H20V28H12V20H20V12H28V20H36V28Z"
                        fill="white"
                    />
                    </g>
                    <defs>
                    <clipPath id="clip0_0_3988">
                        <rect width="48" height="48" fill="white" />
                    </clipPath>
                    </defs>
                </svg>
                <h2><?php echo esc_html($list_item['title']); ?></h2>
                </div>
                <div class="osms__card_description"><?php echo $list_item['text']; ?></div>  
        </div>
        </a>
        <?php else: ?>
          <div class="osms__card-headline">
                <svg
                    width="48"
                    height="48"
                    viewBox="0 0 48 48"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <g clip-path="url(#clip0_0_3988)">
                    <path
                        d="M38 6H10C7.79 6 6.02 7.79 6.02 10L6 38C6 40.21 7.79 42 10 42H38C40.21 42 42 40.21 42 38V10C42 7.79 40.21 6 38 6ZM36 28H28V36H20V28H12V20H20V12H28V20H36V28Z"
                        fill="white"
                    />
                    </g>
                    <defs>
                    <clipPath id="clip0_0_3988">
                        <rect width="48" height="48" fill="white" />
                    </clipPath>
                    </defs>
                </svg>
                <h2><?php echo esc_html($list_item['title']); ?></h2>
                </div>
                <div class="osms__card_description"><?php echo $list_item['text']; ?></div>  
        </div>
        
        <?php endif; ?>
        <?php $i = $i + 1?>
    <?php endforeach; ?> 
</div>
 

<script>
      var osmsCard1 = document.querySelector("[class*=' osms__card_']");
      var animation1Triggered = false;
      var animation2Triggered = false;
      var animation3Triggered = false;

      var options = {
        root: null,
        threshold: 0.5,
      }; 

      var observerOsmsCard1 = new IntersectionObserver(function (
        entries,
        observer
      ) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting && !animation1Triggered) {
            osmsCard1.classList.add("visible");
            animation1Triggered = true;
            observerOsmsCard1.unobserve(osmsCard1);
          }
        });
      },
      options);

      observerOsmsCard1.observe(osmsCard1);

</script>