/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/groups/steps-wrapper/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
.cbp-steps-wrapper {
  --gap: 5.7rem;
  counter-reset: step-counter;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--gap);
}
@media only screen and (max-width: 1024px) {
  .cbp-steps-wrapper {
    --gap: 3rem;
  }
}
.cbp-steps-wrapper > .cbp-step {
  position: relative;
  flex-basis: calc((100% - 2 * var(--gap)) / 3);
}
@media only screen and (max-width: 767px) {
  .cbp-steps-wrapper > .cbp-step {
    flex-basis: 100%;
  }
}
.cbp-steps-wrapper > .cbp-step:before {
  counter-increment: step-counter;
  content: counter(step-counter);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.11;
  text-align: center;
  width: 3.4125rem;
  height: 3.4125rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-on-accent);
  background-color: var(--color-accent);
}

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