function mediaQuery(element, value) {
  let x = document.querySelectorAll(element);

  x.forEach((item) => {
    if (window.matchMedia(`(max-width: ${value}px)`).matches) {
      item.classList.add('mobile');

    } else {
      item.classList.remove('mobile');
    }

  })

  return x;

}

// add class mobile to the element class hero on the screensize 600px
mediaQuery(".hero", 600);

@media (max-width: 960px) {
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  .container {
    width: 300px;
  }
}