/* .container {
    display: flex;
    margin: 1em auto;
    outline: 1px dashed lightgray;
    flex: none;
    overflow: auto;
  }
  .container.y {
    width: 256px;
    height: 256px;
    flex-flow: column nowrap;
    overflow-x: hidden;
  }
  
  .y.mandatory-scroll-snapping {
    scroll-snap-type: y mandatory;
  }
  .y.proximity-scroll-snapping {
    scroll-snap-type: y proximity;
  }
  
  .container > div {
    text-align: center;
    scroll-snap-align: center;
    flex: none;
  }
  
  .y.container > div {
    line-height: 256px;
    font-size: 128px;
    width: 256px;
    height: 100%;
  }
  
  .y.container > div:first-child {
    line-height: 1.3;
    font-size: 64px;
  }
  
  .container > div:nth-child(even) {
    background-color: #87ea87;
  }
  .container > section:nth-child(odd) {
    background-color: #87ccea;
  }  
*/

.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory !important;
}
.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.containX > div  {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.containX {
  display: flex;
  margin: 1em auto;
  outline: 1px dashed lightgray;
  flex: none;
  overflow: auto;
}

.containX.y {
  flex-flow: column nowrap;
  overflow-x: hidden;
}

/* .scroller {
  height: 90vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.scroller section {
  scroll-snap-align: start;
  height: 90vh;
} */