- var data = [
- 	'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.', 
- 	'Cake cookie lemon drops muffin sugar plum. Liquorice pudding plum topping macaroon pie chocolate.', 
- 	'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.', 
- 	'Cake cookie lemon drops muffin sugar plum. Liquorice pudding plum topping macaroon pie chocolate.'
- ], n = data.length;

style :root { --n: #{n} }
- for(var i = 0; i < n; i++)
	p(style=`--idx: ${i}`) #{data[i]}

$d: 40em;
$r: .5*$d;
$x: 1.5em;
$c: rgba(#fff, .8);

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	--i: var(--wide, 1);
	--j: calc(1 - var(--i));
	--k: calc(1 - var(--narr, 1));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	/* test background *
	background: 
		repeating-linear-gradient(-45deg, 
				gainsboro 0, gainsboro 2px, 
				transparent 0, transparent 5px);
	/* live background */
	background: linear-gradient($c, $c), 
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg) 
			50%/ cover fixed;/**/
	font: 400 1em/1.25 coda, trebuchet ms, arial, sans-serif;
	
	&:after {
		margin-top: 1em;
		width: .625*$d; height: .0375*$d;
		max-width: 100%;
		border-radius: 50%;
		background: radial-gradient(closest-side, rgba(#000, .75), rgba(#000, .35) 15%, transparent);
		filter: blur(3px);
		content: ''
	}
	
	@media (max-width: $d + 2*$x) { --wide: 0 }
	@media (min-width: 270px) { --narr: 0 }
}

p {
	--p: var(--parity, 1);
	--q: calc(1 - var(--p));
	--s: calc(1 - 2*var(--p));
	display: flex;
	flex-direction: var(--narr, column);
	align-items: center;
	justify-content: center;
	margin: calc(var(--j)*.25em) 0;
	padding: 
		calc(var(--i)*#{.5*$r}/var(--n) + var(--j)*5vw) 
		calc(var(--i)*#{.5*$r} + var(--j)*2vw);
	width: calc(var(--i)*#{$d} + var(--j)*100%);
	min-height: var(--wide, calc(#{$d}/var(--n)));
	transform: translate((calc(var(--i)*var(--s)*#{-$x})));
	background: 
		radial-gradient(at calc(var(--q)*100%) 0, 
				rgba(0, 0, 0, calc(.5 + var(--p)*.5)), 
				transparent 63%) 
			calc(var(--q)*100%) 0/ 65% 65% no-repeat, 
		linear-gradient(calc(var(--s)*-90deg), 
				hsl(23, calc(var(--q)*98%), calc(27% + var(--q)*20%)), 
				hsl(44, calc(var(--q)*92%), 52%));
	color: HSL(0, 0%, calc(var(--p)*100%));
	text-align: var(--parity, right);
	clip-path: var(--wide, circle(#{$r} at 50% calc((.5*var(--n) - var(--idx))*#{$d}/var(--n))));
	counter-increment: idx;
	
	&:before {
		margin: 
			0 
			calc(var(--k)*var(--q)*.25em) 
			0 
			calc(var(--k)*var(--p)*.25em);
		order: calc(var(--k)*var(--p));
		font-size: 4em;
		content: counter(idx, decimal-leading-zero)
	}
	
	&:nth-child(odd) { --parity: 0 }
}