Пытаюсь сделать элемент прокручиваемым внутри fullpage.js в div, но безуспешно

Делал всё по этой методичке: https://alvarotrigo.com/fullPage/help/make-an-element-scrollable-inside-a-fullpage-js-section-or-slide/ Но ничего не происходит и не могу найти ошибку, только постигаю всё в js, и пришлось лезть слишком далеко. Ниже то, что расписал в head:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="./js/easings.min.js"></script>
  <script src="./js/scrolloverflow.min.js"></script>
  <script src="./js/fullpage.min.js"></script>
  <script>
  $(document).ready(function() {
      $('#fullpage').fullpage();
      menu: '#navigation'
  });
  </script>
  <script>
    new fullpage('#fullpage', {
      scrollOverflow: true,
      normalScrollElements: '.footer-descr-rule'
    });
  </script>

И следующих фрагмент, тот блок, где необходимо сделать прокрутку:

    <section class="footer section" data-anchor="FAQ">
  <div class="container">
    <h3 class="footer__title">FAQ</h3>
    <div class="footer-title-logo flex">
      <img src="#" alt="" class="footer__logo">
    </div>
    <div class="footer-descr flex">
      <div class="footer-descr-rule">
        <details>
          <summary>Покажи-скрой меня 1</summary>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum obcaecati quos, enim culpa sunt libero, perspiciatis omnis dicta, rem magni aliquid laudantium quaerat fugit pariatur provident praesentium quia fugiat neque.</p>
        </details>
        <details>
          <summary>Покажи-скрой меня 2</summary>
          <p>Основным источником сведений о ней являются тексты поэтической </p>
        </details>
      </div>...

Также, вот css footer-descr-rule:

    .footer-descr-rule {
  border: 1px solid var(--text-color);
  border-bottom: none;
  border-radius: 10px;
  width: 1000px;
  height: 360px;
  padding: 50px;
  overflow-y: auto;
  overflow-x: hidden;
}

Помогите, новичок в этом, сам разобраться не могу...