I'm trying to achieve an effect similar to what I see here

But the content of each section should also be scrollable, i.e. it will only be fixed when it reaches the bottom of the section.

For example, when the content is 200vh, like this:

section {
  position: sticky;
  top: 0;
  height: 200vh;
}

section img{
  width:100%;
  height:100%
}


section:nth-of-type(1) {
  background: rgb(225, 204, 200);
}

section:nth-of-type(2) {
  background: rgb(240, 216, 163);
}

section:nth-of-type(3) {
  background: rgb(192, 211, 217);
}

<section>
    <img src="https://picsum.photos/id/128/800/300" alt="">
</section>

<section>
    <img src="https://picsum.photos/id/48/800/300"alt="">
</section>

<section>
    <img src="https://picsum.photos/id/42/800/300" alt="">
</section>

As you can see, Parts 1 and 2 are pinned to the top and we can't scroll to see their photos.

But the last part works perfectly.

So how do I achieve this effect? Ideally use pure CSS, but I'm also open to JavaScript solutions.