.wheel {
  background: conic-gradient(
    #ff4d8d 0 40deg,
    #7b5cff 40deg 80deg,
    #18cdb8 80deg 120deg,
    #f39c33 120deg 160deg,
    #ed436f 160deg 200deg,
    #c99722 200deg 240deg,
    #5d6bff 240deg 280deg,
    #11a99e 280deg 320deg,
    #d98920 320deg 360deg
  );
}

.wheel::before {
  background: repeating-conic-gradient(
    from 20deg,
    rgba(255, 255, 255, 0.34) 0 1deg,
    transparent 1deg 40deg
  );
}

.label-0 { transform: rotate(20deg) translateY(-125px) rotate(-20deg); }
.label-1 { transform: rotate(60deg) translateY(-125px) rotate(-60deg); }
.label-2 { transform: rotate(100deg) translateY(-125px) rotate(-100deg); }
.label-3 { transform: rotate(140deg) translateY(-125px) rotate(-140deg); }
.label-4 { transform: rotate(180deg) translateY(-125px) rotate(-180deg); }
.label-5 { transform: rotate(220deg) translateY(-125px) rotate(-220deg); }
.label-6 { transform: rotate(260deg) translateY(-125px) rotate(-260deg); }
.label-7 { transform: rotate(300deg) translateY(-125px) rotate(-300deg); }
.label-8 { transform: rotate(340deg) translateY(-125px) rotate(-340deg); }

@media (max-width: 390px) {
  .label-0 { transform: rotate(20deg) translateY(-107px) rotate(-20deg); }
  .label-1 { transform: rotate(60deg) translateY(-107px) rotate(-60deg); }
  .label-2 { transform: rotate(100deg) translateY(-107px) rotate(-100deg); }
  .label-3 { transform: rotate(140deg) translateY(-107px) rotate(-140deg); }
  .label-4 { transform: rotate(180deg) translateY(-107px) rotate(-180deg); }
  .label-5 { transform: rotate(220deg) translateY(-107px) rotate(-220deg); }
  .label-6 { transform: rotate(260deg) translateY(-107px) rotate(-260deg); }
  .label-7 { transform: rotate(300deg) translateY(-107px) rotate(-300deg); }
  .label-8 { transform: rotate(340deg) translateY(-107px) rotate(-340deg); }
}