Скрол неправильно работает с картинкой

   (function(){
  let speed = 2; // Скорость скролла.
  
  let scroll = document.querySelector('.scroll');
  
  let left = 0; // отпустили мышку - сохраняем положение скролла
  let drag = false;
  let coorX = 0; // нажали мышку - сохраняем координаты.
  
  scroll.addEventListener('mousedown', function(e) {
    drag = true;
    coorX = e.pageX - this.offsetLeft;
  });
  document.addEventListener('mouseup', function() {
    drag = false;
    left = scroll.scrollLeft;
  });
  scroll.addEventListener('mousemove', function(e) {
    if (drag) {
      this.scrollLeft = left + (e.pageX - this.offsetLeft - coorX)*speed;
    }
  });
  
  })();

  .scroll {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 200px;
    white-space: nowrap;
  }
  
  .block {
    display: inline-block;
    height: 100%;
    width: 200vw;
    background-color: orange;
    border-right: 3px solid #045acf;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .grid{
    display:grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, 200px);
  grid-gap: 20px;

  }

 <div class="scroll">
    <div class="block">
      <div class="grid">
      <div class="block1"><img width="100%;"src="https://s1.1zoom.ru/big0/52/Love_Sunrises_and_sunsets_Fingers_Hands_Heart_Sun_532758_1280x897.jpg"></div>
      <div class="block1"><img width="100%;"src="https://s1.1zoom.ru/big0/52/Love_Sunrises_and_sunsets_Fingers_Hands_Heart_Sun_532758_1280x897.jpg"></div>
      <div class="block1"><img width="100%;"src="https://s1.1zoom.ru/big0/52/Love_Sunrises_and_sunsets_Fingers_Hands_Heart_Sun_532758_1280x897.jpg"></div>
    </div>
    </div>
    </div>
 
  </div>