Как отследить изменение ширины HTML на чистом JS?

<div class="section-project">
  <h6 class="section-subtitle">Наши</h6>
  <h2 class="section-title">Проекты</h2>
  <div class="section-project-block">
    <a href="index.html" class="section-project-box karel">
      <p class="section-project-title">Карел</p>
      <p class="section-project-text">Угловая кухня, с резными фасадами - 78 000р</p>
    </a>
    <a href="index.html" class="section-project-box kinoshult">
      <p class="section-project-title">Киносхульт</p>
      <p class="section-project-text">Угловая кухня, с резными фасадами - 78 000р</p>
    </a>
    <a href="index.html" class="section-project-box overbul">
      <p class="section-project-title">Овербул</p>
      <p class="section-project-text">Угловая кухня, с резными фасадами - 78 000р</p>
    </a>
    <a href="index.html" class="section-project-box action">
      <p class="section-project-title">Кухня вашей мечты</p>
    </a>
    </a>
  </div>
</div>

var project_block = document.querySelector(".section-project-block")
var width = document.documentElement.clientWidth
var startx = 0
var dist = 0
var left = 0
var right = 0
var endx = 0
var resize = 0
if (width < 575) {
  project_block.addEventListener('touchstart', function(e) {
    var touchobj = e.changedTouches[0]
    startx = parseInt(touchobj.clientX)
  });

  project_block.addEventListener('touchend', function(e) {
    var touchobj = e.changedTouches[0]
    endx = parseInt(touchobj.clientX)
    dist = startx - endx
    if (dist > 60) {
      left = left - 280
      if (left < -840) {
        left = 0
      }
      project_block.style.left = left + "px"
    } else if (dist < -60) {
      if (left < 0) {
        left = left + 280
        project_block.style.left = left + "px"
      }
    }
  })
}