.dashboard__profile {
  display: grid;
  place-content: stretch;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  border-radius: 15px;

  overflow: hidden;
}

.dashboard__profile > * {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;

  min-width: 0%;
  min-height: 0%;
  place-self: stretch;
}

.profile__profile {
  z-index: 0;
}

.profile__progress {
  --steps: 8;
  --step: calc(100 / var(--steps));
  --base: calc(0.5 * var(--step));
  --progress: calc(
    1% * (
      var(--base) + 
      var(--current) * var(--step)
    )
  );

  clip-path: polygon(
    0% 0%,
    var(--progress) 0%,
    var(--progress) 100%,
    0% 100%
  );

  z-index: 1;
}

.profile__stages {
  z-index: 2;
}

.profile__stage-dot {
  fill: var(--hi-primary);
}

.profile__stage-shade {
  stroke: var(--hi-primary-dim);
}

.profile__stage--active .profile__stage-dot {
  fill: var(--hi-secondary);
}

.profile__stage--active .profile__stage-shade {
  stroke: var(--hi-secondary-dim-1);
}