<?php 

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

<div class="container">
<h1 class="advantages-title title">
          <?php echo $title ?>
        </h1>
        <div class="people-container">
          <?php foreach($list as $item): ?>
          <a
             href="<?php echo $item['link'] ?>"
          >
            <div class="people male">
              <span>
                <?php echo $item['title'] ?>
                <svg
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M18 12L18.3536 11.6464L18.7071 12L18.3536 12.3536L18 12ZM6 12.5C5.72386 12.5 5.5 12.2761 5.5 12C5.5 11.7239 5.72386 11.5 6 11.5V12.5ZM14.3536 7.64645L18.3536 11.6464L17.6464 12.3536L13.6464 8.35355L14.3536 7.64645ZM18.3536 12.3536L14.3536 16.3536L13.6464 15.6464L17.6464 11.6464L18.3536 12.3536ZM18 12.5H6V11.5H18V12.5Z"
                    fill="white"
                  />
                </svg>
              </span>
              
              <img class="people-image"  src="<?php echo $item['img']['url'] ?>" alt="<?php echo $item['title'] ?>" />
            </div>
          </a>
          <?php endforeach; ?>
        </div>
</div>
<script>
  const peopleImages = document.querySelectorAll(".people-image"); 
  var btmImg = document.querySelector(".section__btn_img");
  var animation4Triggered = false;
  var options = {
        root: null,
        threshold: 0.5,
      }; 
var observerBlock4 = new IntersectionObserver(function (
        entries,
        observer
      ) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting && !animation4Triggered) {             
            peopleImages.forEach((elem, index) => {
              elem.classList.add("visible");
            });
            animation4Triggered = true;
            observerBlock4.unobserve(btmImg);
          }
        });
      },
      options);

      observerBlock4.observe(btmImg);
</script>