Défilement de la moitié de la page avec butée

Bonjour à tous,

J'ai actuellement deux sections (chacune occupant environ 50% de la largeur de l'écran). La première section comporte du texte, la seconde des images. La section de texte est plus courte que celle des images. J'aimerais, lorsque l'on descend sur la page, une fois arrivée au bout du texte, que seule la section des images scrolle et que le texte lui reste figé.

Je vous mets un lien vers une illustration:

https://ibb.co/BLjxfj7

Ce que j'aimerais c'est pouvoir défiler sur la partie de droite, pour visualiser complétement les images 5 et 6, et découvrir l'image 7 (références à l'illustration ci-dessus). Et que le texte lui reste comme sur l'image. (Le gris en arrière-plan représente le viewport.) Il y a aussi des images et du texte au dessus, qui jusqu'ici défilaient ensemble, simultanément.

Je vous mets à titre indicatif la structure de mon html, et puis, plus important, ce que j'ai mis en css pour le moment.

Peut-être que les seules solutions seront en jquery... ?

D'ores et déjà merci pour votre aide!

<main>
 <section>
  <article>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
    <h2></h2>
    <p>
    </p>
  </article>
 </section>
 <section>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
  <figure>
   <img/>
   <figcaption></figcaption>
  </figure>
 </section>
 </main>

main {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}