.projects__row {
  display: flex;
  width: 100%;
}
.projects__label {
  padding: .6rem 0;
  color: #fff;
  width: 17ch;
  @include for-mobile{
    font-size: var(--font-size--xs);
  }
  @include for-desktop{
    font-size: var(--font-size--lg);
  }
  border-right: 1px solid rgba(255,255,255,.3);
}
.projects__bar {
  flex: 1;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(6, 1fr);
}
.projects__step {
  background-color: #fff;
  border-radius: 2px;
  opacity: 10%;
  text-align: right;
  padding: .2em .6em;
  align-self: center;
  height: 1rem;
  font-size: var(--font-size--xs);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  span {
    margin-left: .2em;
    opacity: .5;
  }
}
.projects__step--1 {
  opacity: 40%;
  background-image: linear-gradient(270deg, #E79C4F 0%, #C83232 100%);
}
.projects__step--2 {
  opacity: 40%;
  background-image: linear-gradient(270deg, #D5B85F 0%, #E89E50 100%);
}
.projects__step--3 {
  opacity: 40%;
  background-image: linear-gradient(270deg, #ADAE67 0%, #D5B85F 100%);
}
.projects__step--4 {
  opacity: 40%;
  background-image: linear-gradient(270deg, #85A570 0%, #ACAE67 100%);
}
.projects__step--5 {
  opacity: 40%;
  background-image: linear-gradient(90deg, #84A470 0%, #73A073 100%);
}
.projects__step--6 {
  opacity: 40%;
  background-image: linear-gradient(270deg, #73A073 0%, #7DA371 100%);
}
.projects__step--active {
  opacity: 1;
}