.number-swiper, .number-swiper-column{
  height: 3.5em;  /* column has to be the same hight as container for corect root margin*/
}

.number-swiper{
  user-select: none;
  display:flex;
  font-size: 20vmin;
  font-size: calc(9vmin + 9vmax);;
  justify-content: center;
  align-items: center;
  /* transition: .2s; */
  position: relative;
}

.number-swiper-column::-webkit-scrollbar { display:none }

.number-swiper-column{
  overflow: scroll;
  scrollbar-width: none;
  list-style: none;
  padding: 0;
  margin: 0;
  scroll-snap-type: y mandatory;
  -webkit-mask-image: linear-gradient(0deg, transparent 5%, black 40%, black 60%, transparent 100%);
  mask-image: linear-gradient(0deg,  transparent 5%, black 40%, black 60%, transparent 100%);
  transition:.2s;
}

.number-swiper-column-animating{
  scroll-snap-type: none;
}

.number-swiper-column li{
  /* nothing can be in em or % unites because that's changed by active and changes break scroll snap */
  scroll-snap-align: center;
  transition: .2s;
  display: grid;
  align-items: center;

  /* Fallbacks */
  height: 22vmin;
  width: 20vmin;
  font-size: 20vmin;
  line-height: 20vmin;
  margin: .1vmin -.1vmin -.1vmin .1vmin;
  height: calc(10vmin + 10vmax);
  width: calc(8vmin + 8vmax);
  font-size: calc(8vmin + 8vmax);
  line-height: calc(8vmin + 8vmax);
}

.number-swiper-column li.number-swiper-active-number{
  font-size: 28vmin;
  font-size: calc(11vmin + 11vmax);
}