:root {
  --progress-bar-bg-color: #b7e1fe;
  --progress-bar-color: var(--bs-white);
  --progress-bar-label-bg-color: #012352;
  --progress-bar-label-font-weight: 700;
  --progress-bar-sum-bg-color: #0065f2;
}

.progress-bar-graph__header {
  max-width: 30rem;
  margin-bottom: 8.5rem;
}
.progress-bar-graph {
  display: flex;
  background-color: var(--progress-bar-bg-color);
  color: var(--progress-bar-color);
}
.progress-bar-graph__item {
  position: relative;
  padding: 1.5rem 2rem;
  text-align: center;
  transition: 0.5s ease;
  flex-basis: 0;
}
.progressbar-1 {
  background: #264AA8;
}
.progressbar-2 {
  background: #25a855;
}
.progressbar-3 {
  background: #264AA8;
}
.progressbar-4 {
  background: #0065F2;
}
.progressbar-5 {
  background: #4EB6FF;
}
.progress-bar-graph__label {
  position: absolute;
  top: -6rem;
  color: #000;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 8rem;
  font-weight: var(--progress-bar-label-font-weight);
}
.progress-bar-graph__item::before,
.progress-bar-graph__item::after {
  position: absolute;
  content: '';
  width: 2px;
  height: 4rem;
  background-color: var(--progress-bar-label-bg-color);
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
}

.progress-bar-graph__item-sum::before {
  top: 50%;
  transform: translateY(-50%);
  height: 130%;
  background-color: var(--progress-bar-sum-bg-color);
  left: 0;
}
.progress-bar-graph__item-sum {
  padding: 0;
  color: var(--progress-bar-sum-bg-color);
  min-width: 70px;
}
.progress-bar-graph__item-sum::after {
  top: 50%;
  transform: translateY(-50%);
  height: 130%;
  background-color: var(--progress-bar-sum-bg-color);
  left: auto;
  right: 0;
}
.progress-bar-graph__label--sum {
  font-size: 1rem;
  top: -3.5rem;
  width: auto;
  min-width: 4rem;
  transform: none;
  left: -1rem;
  color: inherit;
}
.progress-bar-graph__label--sum-end {
  left: auto;
  right: 0;
  text-align: right;
}

.progress-bar-graph__footer-text {
  max-width: 44rem;
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .progress-bar-graph__item {
    padding: 3.5rem 2.5rem;
  }
}