/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/css-loader@7.1.4_webpack@5.108.4/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.19_typescript@5.9.3_webpack@5.108.4/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/.pnpm/sass-loader@17.0.0_sass@1.101.0_webpack@5.108.4/node_modules/sass-loader/dist/cjs/index.js??ruleSet[1].rules[1].use[3]!./components/blocks/infographic/styles/src/infographic.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.infographic{
  left:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  margin-top:var(--spacing-m);
  position:relative;
  right:50%;
  width:100vw;
}
.infographic__timeline-wrapper{
  overflow:hidden;
  overflow-x:scroll;
  padding-bottom:10rem;
  scrollbar-width:none;
  width:100%;
  -ms-overflow-style:none;
}
.infographic__timeline-wrapper::-webkit-scrollbar{
  display:none;
}
.infographic__timeline{
  align-items:center;
  display:flex;
  flex-flow:row nowrap;
  gap:2rem;
  justify-content:space-between;
  min-width:100%;
  padding-inline:5rem;
  position:relative;
  width:-moz-max-content;
  width:max-content;
  z-index:2;
}
.infographic__timeline:before{
  background-color:currentcolor;
  bottom:0;
  content:"";
  display:block;
  height:1px;
  left:0;
  position:absolute;
  transform:translateY(-1rem);
  width:100%;
}
.infographic__timeline-item{
  align-items:center;
  display:flex;
  flex:0 0 auto;
  flex-basis:8rem;
  flex-flow:column nowrap;
  gap:.5rem;
  position:relative;
}
.infographic__timeline-item--active{
  --indicator-color:var(--color-green-600);
  --text-color:#fff;
}
.infographic__timeline-item--last-active{
  --indicator-color:var(--color-blue-600);
  --text-color:#fff;
  --after-display:block;
}
.infographic__timeline-item:focus .infographic__timeline-item-content,.infographic__timeline-item:hover .infographic__timeline-item-content{
  opacity:1;
  pointer-events:all;
  transform:translate(-50%, 100%);
}
.infographic__timeline-item-title{
  font-weight:700;
  line-height:1.1;
  text-align:center;
}
.infographic__timeline-item-indicator{
  background-color:var(--indicator-color, #fff);
  border:2px solid color-mix(in hsl, var(--indicator-color), #fff 15%);
  border-radius:100%;
  display:block;
  height:2rem;
  position:relative;
  width:2rem;
}
.infographic__timeline-item-indicator:after{
  animation:a 4s linear infinite;
  background-color:color-mix(in lch, var(--indicator-color), transparent 40%);
  border-radius:100%;
  content:"";
  display:var(--after-display, none);
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.infographic__timeline-item-content{
  background-color:var(--indicator-color, var(--color-grey));
  border-radius:var(--border-radius-s);
  bottom:-1rem;
  color:var(--text-color, var(--color-brown));
  font-size:.875;
  left:50%;
  line-height:1.1;
  opacity:0;
  padding:1rem;
  pointer-events:none;
  position:absolute;
  text-align:center;
  transform:translate(-50%, calc(100% - 2rem));
  transition:transform .25s var(--ease-main), opacity .25s var(--ease-main);
  width:15rem;
  z-index:1;
}
.infographic__blocks{
  display:grid;
  gap:2rem;
  grid-template-areas:"done active todo";
  margin-top:-7rem;
}
@media (max-width:1080px){
  .infographic__blocks{
    grid-template-areas:"done todo" "active active";
  }
}
@media (max-width:768px){
  .infographic__blocks{
    grid-template-areas:"done" "active" "todo";
  }
}
.infographic__block{
  background-color:var(--color-brown);
  border-radius:var(--border-radius-m);
  color:#fff;
  padding:2rem;
}
.infographic__block:first-of-type{
  --highlight-color:var(--color-green-200);
  grid-area:done;
}
.infographic__block:nth-of-type(2){
  --highlight-color:var(--color-blue-200);
  grid-area:active;
}
.infographic__block:nth-of-type(3){
  --highlight-color:var(--color-orange-200);
  grid-area:todo;
}
.infographic__block-heading{
  color:var(--highlight-color);
  font-size:1.75rem;
}
.infographic__block-list li:before{
  background-color:var(--highlight-color) !important;
}

@keyframes a{
  0%{
    opacity:1;
    transform:scale(1);
  }
  80%{
    filter:brightness(1.2);
    opacity:1;
    transform:scale(1.6);
  }
  to{
    opacity:0;
    transform:scale(1.8);
  }
}

/*! Add Soul */
/*# sourceMappingURL=infographic.css.map*/