.donut-chart {
  position: relative;
  display: inline-block;
}

.donut-chart svg {
  display: block;
}

.donut-chart__track {
  fill: none;
  stroke: var(--color--gray-80);
  stroke-width: 21;
}

.donut-chart__progress {
  fill: none;
  stroke: var(--color--primary-base);
  stroke-width: 21;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--transition-duration--base) var(--transition-timing--base);
}

.donut-chart__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-family--display);
  font-size: var(--font-size--header);
  font-weight: var(--font-weight--bold);
  color: var(--color--text);
  letter-spacing: 0.04em;
}