Preview:
function applyMediaQuery(selector, maxWidth) {
  const elements = document.querySelectorAll(selector);

  function updateClasses(mediaQuery) {
    elements.forEach((item) => {
      if (mediaQuery.matches) {
        item.classList.add('mobile');
      } else {
        item.classList.remove('mobile');
      }
    });
  }

  const mediaQuery = window.matchMedia(`(max-width: ${maxWidth}px)`);

  // Initial check
  updateClasses(mediaQuery);

  // Listen for changes
  mediaQuery.addEventListener('change', updateClasses);

  return elements;
}

// Usage
applyMediaQuery(".hero", 600);
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter