1) Кнопки на карточке срабатывают через раз 2) Метод target.closest работает тоже через раз, в чем может быть проблема?

https://github.com/Kurday/Kurday.github.io/tree/master/app - репозиторий с исходным кодом https://kurday.github.io/app/ - хостинг с карточкой

    front.addEventListener('click', function(event){
      const target = event.target
      const frontButton = target.closest('.front');

      if (frontButton) {
         console.log('нажали');
        } 
    });

По идее клик на любой участок карточки должен приводить к срабатываню console_log, но это происходит через раз, не все участки поддаются этому правилу.

    <div class="container">
                    <div class="changeling__row">
                        <!--    Первая карточка -->
                        <div class="card">
                            <div class="card-item">
                                <!--    передняя часть карточки -->
                                <div class="front ">
                                    <div class="card__logo">
                                        <img src="img/front_card_logo.png" alt="">
                                        <div class="card__title">
                                            <span class="card__title_company">COMPANY</span><span class="card__title_logo">LOGO</span>
                                            <span class="card__title_slog">slogangoeshere</span>
                                        </div>
                                    </div>
                                    <!-- слои картинки с паралакс эффектом   -->
                                    <div data-speed="20" class="card__layer card__layer_top"></div>
                                    <div data-speed="40" class="card__layer card__layer_center"></div>
                                    <div data-speed="70" class="card__layer card__layer_bottom"></div>
                                    <div class="card__button"></div>
                                </div> 
                                <!-- /.front -->

                                <!-- задняя часть карточки -->
                                <div class="back ">
                                    <!-- Проблемная кнопка перевертышь -->
                                    <div class="card__backbutton"><span>Подробнее</span></div>
                                    <!-- слои картинки с паралакс эффектом   -->    
                                    <div data-speed="20" class="card__layer card__backlayer_top"></div>
                                    <div data-speed="40" class="card__layer card__backlayer_center"></div>
                                    <div data-speed="70" class="card__layer card__backlayer_bottom"></div>
                                    <div class="card__logo card__logo_back">
                                        <div class="card__title">
                                            <span class="card__title_backcompany">THOMAS</span><span class="card__title_backlogo">SMITH</span><br>
                                            <span class="card__title_backslog">Graphic Designer</span>
                                        </div>
                                    </div>
                                    <div class="card__info">
                                        <ul>
                                            <li><div><img src="img/geo.png" alt=""></div><span>city address, street home location goes here</span></li>
                                            <li><div class="color"><img src="img/telefon.png" alt=""></div><span>phone: 8 988 259 52 72</span></li>
                                            <li><div><img src="img/mail.png" alt=""></div><span>mail [email protected]</span></li>
                                            <li><div class="color"><img src="img/name.png" alt=""></div><span>www.company.anime.com</span></li>
                                        </ul>
                                    </div>
                                </div>
                                <!-- /. back -->
                            </div>  
                            <!-- /. card-item -->
                        </div>
                        <!-- /.card -->
                    </div>
                </div> ```



    ```window.onload = function(e){

      const cards = document.querySelectorAll('.card'),
            card__button = document.querySelector('.card__button'),
            front = document.querySelector('.front'),
            back = document.querySelector('.back'),
            card__backbutton = document.querySelector('.card__backbutton');


    //***********PARALLAX EFFECT*********************************************************
    function InitParallax(){
        for(let i=0; i<cards.length; i++){
          const card = cards[i];
          card.addEventListener('mousemove', parallax);
          // document.addEventListener('mousemove', parallax); если хотим на весь документ
        }

        function parallax(event){
          this.querySelectorAll('.card__layer').forEach(card__layer => {
            //для каждого слоя своя скорость
            let speed = card__layer.getAttribute('data-speed')
            //задаем свойство с изменяющимся параметром
            card__layer.style.transform = `translateX(${event.clientY*speed/1000}px)`;

          });
        }
    }





    //*********3D HOVER EFFECT ON THE CARD*********************************
    function initCards(){
        //перебираем массив элементов cards и вызываем функции
        for(let i=0; i<cards.length; i++){
          const card = cards[i];
          card.addEventListener('mousemove', startRotate);
          card.addEventListener('mouseout', stopRotate);
        }

        function startRotate(event){
          const cardItem = this.querySelector('.card-item')
          const halfHeight = cardItem.offsetHeight / 2;
          const halfWidth = cardItem.offsetWidth / 2;

          cardItem.style.transform = 'rotateX('+ - (event.offsetY - halfHeight) / 10 
          +'deg) rotateY('+(event.offsetX - halfWidth ) / 10+'deg)';
        }

        function stopRotate(event){
          const cardItem = this.querySelector('.card-item')
          cardItem.style.transform = 'rotate(0)';
        }
    }




    front.addEventListener('click', function(event){
      const target = event.target
      const frontButton = target.closest('.front');

      if (frontButton) {
         console.log('нажали');
        } 
    });




    //кнопка перевертышь на фронтальной части карты
    card__button.onclick = function(){
      front.classList.add("front__active");
      back.classList.add("back__active");
      card__button.classList.add("hide");
      card__backbutton.classList.add("buttonBack");
    };

    //кнопка на Обратной стороне карточки
    card__backbutton.onmousemove = function(){
      // card__backbutton.classList.add("buttonMove");
      card__backbutton.addEventListener('mousemove', function(){card__backbutton.classList.add("buttonMove")});
       card__backbutton.addEventListener('mouseout', function(){card__backbutton.classList.remove("buttonMove")});
    }




    // initialize functions
    InitParallax();
    initCards();
    }


    ```