:root {
  --factor-growth-color: var(--bs-white);
  --factor-growth-item-bg: #8091a8;
  --factor-growth-arrow-border-with: 5px;
}

.factor-growth {
  max-width: 20rem;
  margin: 0 auto;
  container-type: inline-size;
}
.factor-growth-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3,1fr);
  padding-left: 3rem;
  color: var(--factor-growth-color);
  font-size: 1rem;
}
.factor-1 {
  --factor-growth-item-bg: #0065f2;
}
.factor-2 {
  --factor-growth-item-bg: #264aa8;
}
.factor-3 {
  --factor-growth-item-bg: #264aa8;
}
.factor-4 {
  --factor-growth-item-bg: #0065f2;
}
.factor-5 {
  --factor-growth-item-bg: #0065f2;
}
.factor-6 {
  --factor-growth-item-bg: #0065f2;
}
.factor-7 {
  --factor-growth-item-bg: #4eb6ff;
}
.factor-8 {
  --factor-growth-item-bg: #4eb6ff;
}
.factor-9 {
  --factor-growth-item-bg: #4eb6ff;
}
.factor-growth__item {
  background-color: var(--factor-growth-item-bg);
  border-radius: 50%;
  width: 68px;
  height: 68px;
}
.factor-growth__item-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.factor-growth__label {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0.5rem;
}
.factor-growth__label::before {
  content: '';
  position: absolute;
  width: 90%;
  height: 2px;
  bottom: 0;
  background-color: #012352;
  left: 50%;
  transform: translateX(-50%);
}
.factor-growth__label-y-axis {
  transform: rotate(-90deg) translateX(-100%) translateY(-60%);
  transform-origin: 0 0;
}
.factor-growth__label-icon {
  width: 0;
  height: 0;
  border-left: var(--factor-growth-arrow-border-with) solid transparent;
  border-right: var(--factor-growth-arrow-border-with) solid #012352;
  border-bottom: var(--factor-growth-arrow-border-with) solid transparent;
  border-top: var(--factor-growth-arrow-border-with) solid transparent;
  position: absolute;
  bottom: -4px;
}
.factor-growth__label-icon--start {
  left: 12px;
}
.factor-growth__label-icon--end {
  right: 12px;
  transform: rotate(180deg);
}

@media (min-width: 576px) {
  .factor-growth {
    max-width: 28rem;
  }
  .factor-growth-grid {
    gap: 2rem;
    padding-left: 3.5rem;
  }
  .factor-growth__label-y-axis {
    max-width: 22rem;
    top: 1rem;
  }
}
@media (min-width: 1200px) {
  .factor-growth {
    margin-left: auto;
    margin-right: 0;
  }
  .factor-growth__item {
    width: 90px;
    height: 90px;
  }
  .factor-growth__label-y-axis {
    max-width: 25rem;
  }
}