/* -------------------------------- 

💡 Understanding CSS Scroll Snap
🔗 https://codyhouse.co/nuggets/scroll-snap

-------------------------------- */

.parent {
  background-color: hsl(96, 10%, 11%);
  
  /* set height + overflow */
  --scroll-gap: 2em;
  height: 100vh;
  overflow: auto;
  padding: var(--scroll-gap);
  
  /* set scroll snap 👇 */
  scroll-snap-type: y mandatory;
}

.child {
  /* set alignment 👇 */
  scroll-snap-align: center;

  /* align content */
  display: flex;
  align-items: center;
  justify-content: center;

  /* set height */
  height: calc(100vh - 3 * var(--scroll-gap));

  /* style stuff */
  border-radius: 0.4em;
  padding: 1.25em;
  box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03), 
              0 3.1px 5.5px rgba(0, 0, 0, 0.08), 
              0 14px 25px rgba(0, 0, 0, 0.12);
}

.child:not(:last-child) {
  margin-bottom: var(--scroll-gap); /* grid gap */
}

.child:nth-child(1) {
  background-color: hsl(358, 65%, 55%);
}

.child:nth-child(1) h1 {
  color: hsl(165, 100%, 96%);
}

.child:nth-child(2) {
  background-color: hsl(183, 46%, 74%);
}

.child:nth-child(2) h1 {
  color: hsl(96, 20%, 5%);
}

.child:nth-child(3) {
  background-color: hsl(206, 46%, 37%);
}

.child:nth-child(3) h1 {
  color: hsl(165, 100%, 96%);
}

.child:nth-child(4) {
  background-color: hsl(216, 49%, 22%);
}

.child:nth-child(4) h1 {
  color: hsl(165, 100%, 96%);
}