scrollable-container {
  display: flex;
  overflow-x: scroll;
  align-items: stretch;
  height: 100%;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}

scrollable-card {
  flex: 1 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

[data-card] {
  position: absolute;
  left: 50%;
  top: 50%;
  /* this translate doesn't actually do anything, check chards.js for translateY */
  transform: translateY(-50%);
  align-items: center;

  pointer-events: none;
  transform-style: preserve-3d;

  &[data-active] {
    & input,
    & button,
    & textarea,
    & select,
    & a,
    & label {
      pointer-events: auto;
    }
  }
}