@supports (background: paint(something)) {
  @property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
}
.stats-block {
  background-color: var(--color-black);
  color: var(--color-white);
  padding-top: var(--block-vertical-padding);
  padding-bottom: var(--block-bottom-padding);
}
.stats-block__intro {
  margin: -10px auto 50px auto;
  max-width: 830px;
  text-align: center;
  padding: 0 15px;
}
.stats-heading {
  text-align: center;
  margin-bottom: 30px;
  padding-right: var(--gutter);
  padding-left: var(--gutter);
}
.stat__description {
  text-align: center;
  max-width: 240px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 15px;
}

.donut-chart__donut {
  --color-fill: var(--theme-color, #fff);
  --color-remainder: var(--color-grey-dark);
  --color-hole: var(--color-black);
  --angle: calc(var(--percentage) / 100 * 360deg);
  --thickness: 30px;
  --inner: calc(70% - var(--thickness));
  --outer: calc(var(--inner) + 1px); /* Fixes aliasing */

  /* Hides inner part of conic gradient. Not working for some reason. Should do: https://codepen.io/danb1/pen/PodopOo */
  /*mask: radial-gradient(circle, #0000 var(--inner), #000 var(--outer));*/

  /* Conic gradient, remainder set after --angle */
  transition:--angle 1.2s;
  background-image: conic-gradient(var(--color-fill), var(--color-fill) var(--angle), var(--color-remainder) 0);
  aspect-ratio: 1;
  inline-size: 210px;
  border-radius: 50%;
  position: relative;
}
@supports (background: paint(something)) {
  .donut-chart__donut {
    --angle: 0;
  }
}

  .donut-chart__donut::before {
    content: "";
    position: absolute;
    top: var(--thickness);
    right: var(--thickness);
    bottom: var(--thickness);
    left: var(--thickness);
    z-index: 2;
    background-color: var(--color-hole);
    border-radius: 50%;
  }

  .donut-chart {
    display: grid;
    place-items: center;
  }

  .donut-chart > * {
    grid-area: 1/1;
  }

  .donut-chart__heading {
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 2;
  }

  .stats-download-container {
    padding: 40px 0;
    text-align: center;
  }

  .stats-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .stats-download__icon {
    flex-shrink: 0;
  }

  .stats-download__download {
    color: var(--color-yellow);
  }

  .stats-block .splide__pagination {
    bottom: -21px;
  }

  @media (min-width: 540px) {
    .stats-download {
      flex-direction: row;
      gap: 8px;
    }

    .stats-heading {
      margin-bottom: 50px;
    }

    .stats-block__intro {
      margin-top: -45px;
    }
  }