/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/metrics-showcase-block/style.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
.metrics-showcase {
  width: 100%;
  max-width: 1440px;
  display: flex;
  justify-content: center;
  gap: var(--spacing-2xs, 16px);
}
@media screen and (max-width: 576px) {
  .metrics-showcase {
    padding: var(--spacing-xl, 40px) 0;
    flex-wrap: wrap;
    gap: var(--spacing-3xs, 12px);
  }
}
.metrics-showcase__element {
  width: 500px;
  display: flex;
  padding-top: var(--spacing-2xl, 44px);
  padding-right: var(--spacing-l, 40px);
  padding-bottom: var(--spacing-m, 32px);
  padding-left: var(--spacing-l, 40px);
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--border-radius-2xl, 32px);
}
.metrics-showcase__element--purple {
  background-color: var(--color-purple-900, #130928);
}
.metrics-showcase__element--transparent {
  background-color: transparent;
}
.metrics-showcase__element--white {
  background-color: var(--color-grey-0, #fff);
  border: var(--spacing-b-s, 1px) solid var(--color-grey-100, #e4e5e7);
  flex-grow: 1;
  border-radius: 0.8rem;
}
.metrics-showcase__element--white .metrics-showcase__value {
  color: var(--color-grey-900, #171717);
}
@media screen and (max-width: 1025px) {
  .metrics-showcase__element--white .metrics-showcase__value {
    font-size: 4rem !important;
  }
}
@media screen and (max-width: 1025px) {
  .metrics-showcase__element {
    width: 100%;
    align-items: center;
    border-radius: 0;
  }
  .metrics-showcase__element--purple {
    position: relative;
    border-bottom: var(--spacing-b-s, 1px) solid transparent;
  }
  .metrics-showcase__element--purple::after {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--spacing-b-s, 1px);
    bottom: calc(var(--spacing-b-s, 1px) * -1);
    opacity: 0.32;
    background-color: var(--color-purple-500, #aa66ff);
  }
  .metrics-showcase__element--transparent {
    border-bottom: var(--spacing-b-s, 1px) solid var(--color-grey-200, #d2d4d7);
  }
  .metrics-showcase__element--white {
    border-radius: var(--border-radius-xs, 8px);
    padding: var(--spacing-s, 24px) var(--spacing-xs, 20px) var(--spacing-2xs, 16px) var(--spacing-xs, 20px);
    flex-direction: column;
    align-items: flex-start;
  }
}
.metrics-showcase__value {
  font-size: 82px;
  font-weight: 600;
  line-height: normal;
}
.metrics-showcase__value strong {
  font-weight: 600;
  font-size: 32px;
}
.metrics-showcase__value--purple {
  color: var(--color-grey-0, #ffffff);
}
.metrics-showcase__value--transparent {
  color: var(--color-grey-900, #171717);
}
@media screen and (max-width: 576px) {
  .metrics-showcase__value {
    font-size: 40px !important;
    line-height: 1;
  }
}
.metrics-showcase__description--purple {
  color: var(--color-grey-0, #ffffff);
}
.metrics-showcase__description--transparent {
  color: var(--color-grey-900, #171717);
}
@media screen and (max-width: 576px) {
  .metrics-showcase__description {
    font-size: 14px !important;
    font-weight: 400;
  }
}
.metrics-showcase--purple {
  background-color: var(--color-purple-900);
}
@media screen and (max-width: 1025px) {
  .metrics-showcase--purple {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}
.metrics-showcase--transparent {
  background-color: transparent;
}
@media screen and (max-width: 1025px) {
  .metrics-showcase--transparent {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}

/*# sourceMappingURL=style-index.css.map*/