/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

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