How to make sticky image swap text look better on mobile view?

I am a beginner and want to make this sticky image look better on mobile. As you scroll, the image is in a fixed position and changes once it reaches a certain point and correlates with the related text.

However, it look good on desktop as a two column layout, but I want the text to span wider than it is on mobile.

Any help appreciated, thanks

https://jsfiddle.net/g67j5nLm

<div class="locker">
  <div class="locker__image">
    <div class="locker__container">
      <img class="image image--1" src="https://assets.codepen.io/325536/placeimg_480_720_tech.jpg">
      <img class="image image--2" src="https://assets.codepen.io/325536/tech.jpeg">
    </div>
  </div>
  <div class="locker__content">
    <div class="locker__section locker__section--1 cb" data-swap="image--1">
      <h3>01</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="locker__section locker__section--2 cb" data-swap="image--2">
      <h3>02</h3>
      <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    
  </div>
</div>

.image  {
  opacity: 0;
  transition: all .5s ease;
  &.active {
    opacity: 1;
  }
}

.locker {
  outline: 1px solid #cdcdcd;
  outline-offset: -1px;
  position: relative;
  display: grid;
  grid-template-columns: [full-start] minmax(4.2rem, 1fr) [center-start] repeat(12, [col-start] minmax(min-content, 8rem) [col-end]) [center-end] minmax(4.2rem, 1fr) [full-end];

  &__image {
    position: relative;
    grid-column: col-start 2 / col-end 6;
    img {
      width: auto;
      height: 70vh;
      position: absolute;
      transition: all 1s ease;
    }
  }
  &__container {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    //background-color: #ccc;
  }
  &__content {
    grid-column: col-start 8 / center-end;
    
  }
  &__section {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-top: 1px solid #cdcdcd;
    &:first-child {
        border: none;
    }
    p {
      width: 70%;
    }
  }
}

if(typeof window.IntersectionObserver !== 'undefined') {
  let options = {
    threshold: [0.5, 1]
  }
  const targets = document.querySelectorAll('.cb');
  const locker = document.querySelector('.locker__container');
  function handleIntersection(entries) {
    entries.map((entry) => {
      if (entry.isIntersecting) {
        entry.target.current = entry.target.dataset.swap;
        document.querySelector(".locker__container ." + entry.target.current).classList.add("active");
      } else {
        document.querySelector(".locker__container ." + entry.target.current).classList.remove("active");
      }
    });
  }
  const observer = new IntersectionObserver(handleIntersection, options);
  targets.forEach(target => observer.observe(target));
} else {
  // Fallback
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/8jkC3iR