Scroll Snapping in horizontal scrolling

Question

I want to implement scroll snapping to a horizontal scrolling part of my page that switches back to vertical scrolling.

I tried using scroll-snap-type: x mandatory and scroll-snap-align: start on the containers i want it to snap to but it doesn't work for some reason.

Is there any JavaScript needed to make this work?

html:

<div class="scroll_container" id="key-features">
          <div class="sticky_wrap">
            <div class="horizontal_scroll">

              <div class="scroll_contents title-features">
                  <h1>KEY<br>FEATURES</h1>
              </div>
                        
              <div class="scroll_contents top">
                  <div class="container">
                      <h1>HEADER 1</h1>
                      <p>TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT</p>

                      <div class="features-vid">
                          <video autoplay muted playsinline loop>
                              <source src="Videos/webwings.mp4" type="video/mp4">
                          </video>
                      </div>
                  </div>
              </div>
                        
              <div class="scroll_contents bottom">
                  <div class="container">
                      <div class="features-vid">
                          <video autoplay muted playsinline loop>
                              <source src="Videos/character switching.mp4" type="video/mp4">
                          </video>
                      </div>

                      <h1>HEADER 3</h1>
                      <p>TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT TEXT</p>
                  </div>
              </div>                     
            </div>
          </div>
        </div>

css:

.scroll_container {
    height: 500vh;
    background: rgb(30,50,82);
    background: linear-gradient(315deg, rgb(10, 11, 16) 20%, rgba(10,16,32,1) 100%);
    color: white;
}
  
.horizontal_scroll {
    position: absolute;
    top: 0;
    height: 100%;
    width: 500vw;
    will-change: transform;
    display: flex;
    justify-content: space-between;
    scroll-snap-type: x mandatory;
}
  
.scroll_contents {
    height: 100%;
    width: 100vw;
    position: relative;
    display: flex;
    justify-content: center;
    scroll-snap-align: start;
}

.sticky_wrap {
    overflow: hidden;
    position: sticky;
    top: 0;
    height: 100vh;

}