How can I change the css with js while fetching data?

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 whether 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);
  }
};