body {
  min-height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

.stories {
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-auto-flow: column;
  grid-auto-columns: 100vw;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  background: hsl(0, 0%, 90%);
  overscroll-behavior-x: contain;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory
}

@media (min-width: 480px) {

.stories {
    max-width: 480px;
    max-height: 848px;
    grid-auto-columns: 480px
}
  }

.user {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  background-image: var(--bg), linear-gradient(hsl(0, 0%, 90%), hsl(0, 0%, 98%));
  background-size: cover;
  grid-row: 1;
  grid-column: 1;
  padding: 2rem;
  box-sizing: border-box;
  color: white;
  text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
  font-size: 3rem;
  font-weight: 300;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  touch-action: manipulation;
}