I want to fetch data but I want it to show less data each time the screen gets smaller. how can I do that

i tried this but i have no idea weather it’s correct or not

const catagory = async () => {
    try {
      let movie = document.querySelector(".catagory");
      const mediaQuery = window.matchMedia('(min-width: 992px)')
      var picture = document.getElementsByClassName('.movies');
      function media(mediaQuery) {
        if (mediaQuery.matches){
          movie.classList.add("movie:nth-child(odd) ")
        }
      } 
      movie.classList.add("movie");
      let data = await fetch("http://localhost:3000/movies");
      let res = await data.json();
      let movies = res.map((elem) => {
        return ` <div class="picture">
          <div class="overlay"></div>
          <img src=${elem.image} alt=${elem.alt}></div>`;
      });
      document
        .querySelector(".movies")
        .insertAdjacentHTML("beforeend", movies.join(""));
    } catch (error) {
      console.log(error.message);
    }
  };