<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

html {font-size:4vw;}
body{
	background:#67a968;
	box-sizing:border-box;
}
:after,:before{box-sizing:border-box;}
ol {
	margin:0;
	padding:0;
	list-style:none;
	counter-reset: section 5;
	width:70%;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row-reverse;
	margin:auto;
}
li::before {
	counter-increment: section -1;  
	content:counter(section) ;
	margin:100% 0 0;
	text-align:center;
	display:block;
	height:0;
	font-weight:bold;
	position:relative;
	top:-64%;	
}
li:nth-child(5){counter-reset:item 4;}
li:nth-child(4) ~ li:before{counter-increment:item 1;content:counter(item)}
li:nth-child(9){counter-reset:item2 13;}
li:nth-child(8) ~ li:before{counter-increment:item2 -1;content:counter(item2)}
li{
	text-align:center;
	color:#000;
	background:#b7dcfd;
	border-radius:50%;
	position:relative;
	flex:1 0 25%;	
}
li:after{
	content:"";
	position:absolute;
	right:0%;
	top:50%;
	width:40%;
	padding-top:calc(40% - .8rem);
	border:.4rem solid red;
	border-radius:50%;
	background:blue;
	transform:translate(50% , -50%);
	box-sizing:border-box;	
}
li:nth-child(9):after{display:none;}
li:nth-child(1):after,li:nth-child(8):after{
	z-index:2;	
	right:50%;
	top:100%;	
	transform:translate(50% , -50%);
}
li:nth-child(2):after{z-index:3;}
li:nth-child(5):after,
li:nth-child(6):after,
li:nth-child(7):after{right:auto;left:0%;transform:translate(-50% , -50%);z-index:2;}

/* colors only below*/
li:nth-child(1){background:#fe8868}
li:nth-child(1):after{border-color:#fe8868;background:#ec6798}
li:nth-child(2){background:#feffb1}
li:nth-child(2):after{border-color:#feffb1;background:#fe8868}
li:nth-child(3){background:#74ccde}
li:nth-child(3):after{border-color:#74ccde;background:#feffb1}
li:nth-child(4){background:#b7dcfd}
li:nth-child(4):after{border-color:#b7dcfd;background:#74ccde}
li:nth-child(5){background:#ec6798}
li:nth-child(5):after{border-color:#ec6798;background:#dca8ec}
li:nth-child(6){background:#dca8ec}
li:nth-child(6):after{border-color:#dca8ec;background:#ffdcab}
li:nth-child(7){background:#ffdcab}
li:nth-child(7):after{border-color:#ffdcab;background:#cefede}
li:nth-child(8){background:#cefede}
li:nth-child(8):after{border-color:#cefede;background:#ceb9aa}
li:nth-child(9){background:#a8aaa7}
li:nth-child(9):after{border-color:#74ccde;background:#feffb1}
li:nth-child(10){background:#aaed8e}
li:nth-child(10):after{border-color:#aaed8e;background:#a8aaa7}
li:nth-child(11){background:#fea9cc}
li:nth-child(11):after{border-color:#fea9cc;background:#aaed8e}
li:nth-child(12){background:#ceb9aa}
li:nth-child(12):after{border-color:#ceb9aa;background:#fea9cc}