How to make an adaptive diagonal slider with hexagons in css?

Question

css

Good afternoon! There are two hollow circles, within which it is necessary to implement an adaptive diagonal slider, consisting of 5 hexagons of different sizes, inside of which is text content. Inside the small circle in the center there should be the largest hexagon, on the border of the small circle in the center on both sides smaller hexagons, on the border of the large circle 2 more hexagons even smaller than the previous ones. How to arrange the blocks so that they line up perfectly diagonally and are adaptive? Thank you! Link to my attempts: https://jsfiddle.net/8jpL7hdw/

Answer 1

https://codepen.io/topicstarter/pen/MNbgdK - moved all sizes to variables and adapted already variables