/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./source/components/stat/styles.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
.c-stat {
  --fade-in-duration: 1s;
  --fade-in-distance: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  text-align: center;
}

.c-stat__element {
  transition-property: opacity, transform;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
  transform: translateY(var(--fade-in-distance));
  transition-delay: var(--fade-in-delay);
  transition-duration: var(--fade-in-duration);
  transition-timing-function: ease-in-out;
  opacity: 0;
}
.is-preview .c-stat__element, .c-stat.animation-active .c-stat__element {
  transform: translateY(0);
  opacity: 1;
}

.c-stat__title {
  --fade-in-delay: 0s;
  font-size: 2em;
  font-weight: 600;
}

.c-stat__value {
  --fade-in-delay: 0.5s;
  display: inline-block;
  margin-bottom: 0 !important;
  font-size: 3em;
  font-weight: 900;
}
@media (min-width: 1000px) {
  .c-stat__value {
    font-size: 4em;
  }
}

.c-stat__description {
  --fade-in-delay: 1s;
  max-width: 200px;
  font-style: italic;
}

/*# sourceMappingURL=styles.css.map*/