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

#info {
  --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;
  max-height: 30vh;
  /* test background *
  background: 
  	repeating-linear-gradient(-45deg, 
  			gainsboro 0, gainsboro 2px, 
  			transparent 0, transparent 5px);
  /* live background */
  /* background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg) 50%/cover fixed; */
  /**/
  font: 500 1.5rem/1.5 coda, trebuchet ms, arial, sans-serif;
}
#info:after {
  margin-top: 1rem;
  width: 25rem;
  height: 1.5rem;
  max-width: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35) 15%, transparent);
  filter: blur(3px);
  content: "";
}
@media (max-width: 43em) {
  #info {
    --wide: 0 ;
  }
}
@media (min-width: 270px) {
  #info {
    --narr: 0 ;
  }
}

#info 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)*.25rem) 0;
  padding: calc(var(--i)*10rem/var(--n) + var(--j)*5vw) calc(var(--i)*10rem + var(--j)*2vw);
  width: calc(var(--i)*40rem + var(--j)*100%);
  min-height: var(--wide, calc(40rem/var(--n)));
  transform: translate(calc(var(--i)*var(--s)*-1.5rem));
  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(20rem at 50% calc((.5*var(--n) - var(--idx))*40rem/var(--n))));
  counter-increment: idx;
}
#info p:before {
  margin: 0 calc(var(--k)*var(--q)*.25rem) 0 calc(var(--k)*var(--p)*.25rem);
  order: calc(var(--k)*var(--p));
  font-size: 4rem;
  content: counter(idx, decimal-leading-zero);
}
#info p:nth-child(odd) {
  --parity: 0 ;
}