/* 1. Enable the scroll engine on the panel */
.page {
  scrollbar-width: none; /* Firefox */
  scroll-snap-align: center;
  /* Clamps page panel height 40px above viewport floor, protecting footer space */
  max-height: calc(100svh - 40px);
}

/* 2. Hide the scrollbar track entirely for Chrome/Safari/Edge */
.page::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Remove the "active" page shadow */
.page.active {
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.2);
}

.paper {
  /* Includes padding inside height math to prevent layout expansion blowout into footer*/
  box-sizing: border-box; /* Includes padding/borders inside the 100% height calculation */
}

.footer {
  padding-bottom: 50px; /* more reasonable padding than 500px */
}

/* Makes the children of .main, i.e. the .page panels, snap to the center of the viewport when scrolling horizontally. */
.main {
  scroll-snap-type: x mandatory;
}

@media all and (max-width: 490px) {
  .page {

  }
}