I have a following html structure

<section class="why">
          <div class="why__contour">
            <h2 class="why__text">some title</h2>
            <div class="why__grid">
              <p class="why__grid-element why__grid-element_profession">
              some text
              </p>
              <p class="why__grid-element why__grid-element_travel">
                some text
              </p>
              <p class="why__grid-element why__grid-element_points">
                some text
              </p>
              <p class="why__grid-element why__grid-element_knowledge">
                some text
              </p>
              <p class="why__grid-element why__grid-element_intouch">
                some text
              </p>
              <p class="why__grid-element why__grid-element_consult">
                
              </p>
              <p class="why__grid-element why__grid-element_snacks">
                some text
              </p>
            </div>
          </div>
        </section>

Inside a section there is a contour(container) inside of which there is a simple grid.

I want this grid to move in response to mouse scrolling or movement of the scroll bar. Not across the screen, but a little closer to the border of the contour(container) when the user scrolls down and a little further when the user scrolls the page up.

Like in this screenshot:

how it should scroll

what's the best way to do that?