#160 - Limit CMS Items Per Breakpoint

<!-- 💙 MEMBERSCRIPT #160 v0.1 💙 - LIMIT CMS ITEMS PER BREAKPOINT -->

<!-- 
  Dynamically limits how many CMS items show per breakpoint.
  Useful for responsive design where fewer items should show on smaller screens.
-->

<script>
(function() {
  // Set how many items to show per func
breakpoint(edit as needed)
  const limits = {
    desktop: 6,   // ≥992px
    tablet: 4,    // 768px–991px
    mobile: 2     // tag
<768px
  };

  function getBreakpoint() {
    const width = window.innerWidth;
    if (width >= 992) return 'desktop';
    if (width >= 768) return 'tablet';
    return 'mobile';
  }

  function limitItems() {
    const breakpoint = getBreakpoint();
    const limit = limits[breakpoint] || limits.desktop;
    const lists = document.querySelectorAll('[data-ms-code="cms-list"]');
    lists.forEach(list => {
      const items = list.querySelectorAll('[data-ms-code="cms-item"]');
      items.forEach((item, i) => {
        item.style.display = (i < limit) ? '' : 'none';
      });
    });
  }

  // Run on page load and on resize
  window.addEventListener('DOMContentLoaded', limitItems);
  window.addEventListener('resize', limitItems);
})();
</script>