- 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 }
}