#wrapper{width:100%;aspect-ratio:1/1;border:2px dashed black;border-radius:100%;position:relative}:first-child{--nth-child:1}:nth-child(2){--nth-child:2}:nth-child(3){--nth-child:3}:nth-child(4){--nth-child:4}:nth-child(5){--nth-child:5}:nth-child(6){--nth-child:6}:nth-child(7){--nth-child:7}:nth-child(8){--nth-child:8}:nth-child(9){--nth-child:9}:nth-child(10){--nth-child:10}:nth-child(11){--nth-child:11}:nth-child(12){--nth-child:12}.item{--add:10;left:45%;top:45%;position:absolute;text-align:center;display:flex;justify-content:center;align-items:center;width:10%;height:10%;border-radius:100%;transform:rotate(calc((var(--nth-child) + var(--add))*calc(360/20)*1deg)) translateY(500%) rotate(calc((var(--nth-child) + var(--add))*calc(360/20)*-1deg))}