div получить класс в соответствии с offsetLeft при горизонтальной прокрутке

Question

У меня есть серия div 250px, которые прокручиваются по горизонтали. Я хочу, чтобы, когда каждый div (.slide) достигал 50vw, получал класс (.bigger), чтобы увеличить его ширину до 50vw. этот веб-сайт, объясняющий, чего я пытаюсь достичь sh: https://norgram.co/

body{overflow-y: hidden;}

    .slide {
    width: 250px;
    height: 100vh;
    font-size: 50px;
    font-family: roboto;
    color: #e5e5e5;
    text-align: right;
    padding: 50px;
    border-left: solid 1px #e5e5e5;
  }



  .bigger {

    width: 50vw;

}




  .wrapper {
    display: flex;
    flex-direction: row;
    width: 200vw;

    transform: rotate(90deg) translateY(-100vh);
    transform-origin: top left;
  }

  .outer-wrapper {
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg) translateX(-100vh);
    transform-origin: top left;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;


  }

  ::-webkit-scrollbar {
    display:none;
  }

  <div class="outer-wrapper">
    <div class="wrapper">
      <div class="slide">1</div>
      <div class="slide">2</div>
      <div class="slide">3</div>
      <div class="slide">4</div>
      <div class="slide">5</div>
      <div class="slide">6</div>
      <div class="slide">7</div>
      <div class="slide">8</div>
    </div>
  </div>