body {
    background: hsl(0 0 0);
    color: white;
    font-size: 100px;
  }
  
  #scroll-y {
    position: absolute;
    overflow-x: hidden;
    overflow-y: scroll;
    
    scroll-snap-type: y mandatory;
    
    inset: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .y-content {
    flex: 0 0 100%;
    width: 100vw;
    
    scroll-snap-align: center;
  }
  
  .y-content:first-child {
    background: hsl(100 30 30);
  }
  
  .y-content:nth-child(2) {
    background: hsl(30 30 30);
  }
  
  .y-content:last-child {
    background: hsl(330 20 40);
  }
  
  .y-content.intersecting {
    background: hsl(0 0 0);
  }
  
  #scroll-x {
    overflow-x: scroll;
    overflow-y: hidden;
    
    scroll-snap-type: x mandatory;
    
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  
  .x-content {
    flex: 0 0 100%;
    text-align: center;
    height: 100vh;
    
    scroll-snap-align: center;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }