.rolling-counter {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  align-items: center;
  height: 1.5em;
  line-height: 1.5em;
  overflow: hidden;
}

.rolling-counter .entering {
  will-change: transform, opacity;
  transition: transform var(--transition-duration-400) var(--transition-timing-ease-in),
              opacity var(--transition-duration-400) var(--transition-timing-ease-in);
  transform: scale(0.5);
  opacity: 0;
}

.rolling-counter .entered {
  will-change: transform, opacity;
  transition: transform var(--transition-duration-400) var(--transition-timing-ease-in),
              opacity var(--transition-duration-400) var(--transition-timing-ease-in);
  transform: scale(1);
  opacity: 1;
}

.rolling-counter .exiting {
  will-change: transform, opacity;
  transition: transform var(--transition-duration-400) var(--transition-timing-ease-out),
              opacity var(--transition-duration-400) var(--transition-timing-ease-out);
  transform: scale(0.8);
  opacity: 0;
}

.rolling-counter__container {
  position: relative;
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  text-align: center;
}

.rolling-counter__container div {
  will-change: transform;
  transition: transform var(--transition-duration-2000) var(--transition-timing-ease);
}

.rolling-counter__container div span {
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  display: block;
}