.progress {
    --progress-diameter: 120px;
    --progress-stroke-width: 2px;

    display: grid;
    height: var(--progress-diameter);
    width: var(--progress-diameter);
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    width: var(--progress-diameter);
  
    &::before {
      content: " ";
      width: var(--progress-diameter);
      height: var(--progress-diameter);
      border-radius: 50%;
      border: var(--progress-stroke-width) solid;
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }
  
    &__inside,
    &__bar {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }
  
    &__inside {
      padding: 8px;
      text-align: center;
    }
  }