How to lazy load my article card using Intersection Observer?How to lazy load my article card using Intersection Observer?

I have an HTML page where I arranged 6 cards using a CSS grid. I want them to lazy load t hose cards using Intersection Observer . At a first glance, people will see only two or three cards in a row according to the viewport width, after scrolling down people will see a total of 6 cards. Suppose I have 40 cards. What if I want to load only 6 cards at first and the rest of the card only when the user scrolls. I tried to implement this but failed. Can anyone help me to achieve this? Here is my Github repository link