css scroll snap every 100vh

I have a long web page of 400vh. I try to make a snap every 100vh to focus the user on 1 section:

The problem is here, I have a complexe background: linear-gradient(color1, color2,...); which take all the size of the page (400vh)

according to this :CSS Scroll Snapping, vertical not working I have this css:

body {
    overflow : scroll;
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
    height: 400vh;
    background: linear-gradient(
        180deg,
        #28346f,
        #434f8b 25%,
        #f69d3c 40%,
        #2b9348 60%,
        #0278ae 77%,
        #51adcf 87%,
        #0278ae 100%
    );
}

#full {
overflow-y: scroll;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
  }

  
.container{
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start;
    position: relative;
}

So the snap is working but stay only on the first 100vh of the background.. maybe because of the height: 100vh; on #full