Is it possible to force the same scroll-snap on two classes?

Question

I wanted to use a scroll-snap-type + scroll-snap-stop effect so my page can be viewed "screen" by "screen". But some of the screens are bigger than viewport, so I also need those to overflow and snap on their own. The problem is that I ended up with two levels of scrollbars, that snap independently - an outer one and an inner one. It's close to the result I'm looking for, but I can't avoid the outer scroll skipping some of the "inner" content depending on how the user swipe the screen or use the mouse scroller. Is there a way to have just one scroller controlling both my "outer" and "inner" content? Ideally with just basic HTML/CSS? Or maybe a bit of javascript? Or should I look for a library like gsap to explore more scrolling options?

I tried to apply scroll-snap-align and scroll-snap-stop to a class ".snap" shared by my "outer" content (i.e.: ".part") as well as my "inner" one (".message").

EDIT: what it looks like on codepen: CodePen Home Snapping experience: failed

.wrapper {
  background-color: beige;
  height: 100dvh;
  width: 100dvw;
  box-sizing: border-box;
  overflow-y: auto;
  border: 5vmin solid beige;
  scroll-snap-type: y mandatory;
}

.part {
  box-sizing: border-box;
  background-color: blue;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}


.message {
  background-color: pink;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.snap {
  scroll-snap-align: start;
  scroll-behavior: smooth;
  scroll-snap-stop: always;
}

<main class="wrapper">
  <section class="part snap">
    <p>Part A </p>
  </section>
  <section class="part snap">
    <div class="message snap">Part B message-1</div>
    <div class="message snap">Part B message-2</div>
    <div class="message snap">Part B message-3</div>
  </section>
  <section class="part snap">
    <p>Part C</p>
  </section>
  <section class="part snap">
    <div class="message snap">Part D message-1</div>
    <div class="message snap">Part D message-2</div>
  </section>
  <section class="part snap">
    <p>Part E</p>
  </section>

</main>

Ideally, I would need the snapping to be always this sequence: Part A >> Part B message-1 >> Part B message-2 >> Part B message-3 >> Part C >> Part D message-1 and so on and back. Right now, it too often goes like: Part A >> Part B >> Part C >> Part D without snapping on all the ".message" divs inside my part B and D sections. But I really don't know if that's something possible without complex coding way above my skills? Thanks for your help:)!