- var data = [
- 	{
- 		slist: ['#b071fe', '#c08fff', '#8d5bcc'], 
- 		title: 'gingerbread', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#f88c06', '#f7a334', '#c87107'], 
- 		title: 'brownie', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#b3de15', '#c2e443', '#8fb112'], 
- 		title: 'ice cream', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#e43695', '#e95eab', '#b52e78'], 
- 		title: 'lava cake', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#09c3d0', '#3aced6', '#0a9da7'], 
- 		title: 'macaroon', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}
- ];
- var n = data.length;

style :root { --n: #{n} }
- for(var i = 0; i < n; i++)
	- var s = [`--idx: ${i}`], m = data[i].slist.length;
	- for(var j = 0; j < m; j++) {
		- s.push(`--c${j}: ${data[i].slist[j]}`)
	- }
	article(style=s.join(';'))
		h3 #{data[i].title}
		p #{data[i].ptext}

$bg: #afafaf;

$num-f: 2;
$num-d: $num-f*1em;

$row-f-wide: .4;
$art-gh-wide: 1.25em;
$art-p-wide: .75em;
$num-s-wide: 3.5;
$col-a-wide: $num-s-wide*$num-d;
$col-b-wide: 3*$col-a-wide; // can't use fr in calc :((
$art-w-wide: 2*($col-a-wide + $art-p-wide) + $col-b-wide;
$art-r-wide: .5*$col-a-wide + $art-p-wide;

$col-1-wide: calc(var(--q)*#{$col-a-wide} + var(--p)*#{$col-b-wide});
$col-2-wide: calc(var(--p)*#{$col-a-wide} + var(--q)*#{$col-b-wide});
$art-r0-wide: calc(var(--q)*#{$art-r-wide});
$art-r1-wide: calc(var(--p)*#{$art-r-wide});

$art-g-norm: .5em;
$art-p-norm: 5vw;
$num-s-norm: 1;
$col-a-norm: $num-s-norm*$num-d;
$col-b-norm: calc(100% - #{$art-g-norm} - #{$col-a-norm});
$hd3-p-narr: .25em;

$col-1-norm: calc(var(--q)*#{$col-a-norm} + var(--p)*#{$col-b-norm});
$col-2-norm: calc(var(--p)*#{$col-a-norm} + var(--q)*#{$col-b-norm});

$col-1: calc(var(--i)*#{$col-1-wide} + var(--j)*#{$col-1-norm});
$col-2: calc(var(--i)*#{$col-2-wide} + var(--j)*#{$col-2-norm});

$art-gv: calc(var(--j)*#{$art-g-norm});
$art-gh: calc(var(--i)*#{$art-gh-wide} + var(--j)*#{$art-g-norm});
$art-p: calc(var(--i)*#{$art-p-wide} + var(--j)*#{$art-p-norm});
$hd3-p: calc(var(--k)*#{$hd3-p-narr});
$num-s: calc((var(--i)*#{$num-s-wide} + var(--j)*#{$num-s-norm})*1em);	

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

html {
	--i: var(--wide, 1);
	--j: calc(1 - var(--i));
	--k: var(--narr, 0);
	overflow-x: hidden;
	min-width: 100%;
	background: $bg;
	
	@media (max-width: $art-w-wide) { --wide: 0 }
	
	@media (max-width: 250px) { --narr: 1 }
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	transform-style: preserve-3d;
}

article {
	--p: var(--parity, 1);
	--q: calc(1 - var(--p));
	--s: calc(1 - 2*var(--p));
	display: var(--narr, grid);
	grid-template-columns: #{$col-1} #{$col-2};
	grid-gap: $art-gv $art-gh;
	grid-auto-flow: var(--wide, dense column);
	place-content: var(--parity, center end);
	position: relative;
	padding: $art-p;
	max-width: $art-w-wide;
	border-radius: var(--wide, #{$art-r0-wide $art-r1-wide $art-r1-wide $art-r0-wide});
	transform-style: preserve-3d;
	transform-origin: calc(var(--q)*100%) 100%;
	transform: rotatex(1deg);
	background: linear-gradient(calc(var(--s)*90deg), #fff, $bg);
	font: 600 1em/ 1.25 work sans, sans-serif;
	counter-increment: idx;
	
	&:before {
		display: grid;
		place-content: center;
		grid-row: 1/ span calc(1 + var(--i));
		grid-column: calc(1 + var(--p))/ span 1;
		margin: 0 auto;
		border: solid .125em var(--c0);
		width: $num-d; height: $num-d;
		border-radius: 50%;
		background: linear-gradient(90deg, var(--c1), var(--c2));
		font-size: $num-s;
		font-weight: 300;
		color: #fff;
		content: counter(idx, decimal-leading-zero)
	}
	
	&:after {
		position: absolute;
		width: 100%;
		height: 2*$art-r-wide; max-height: 100%;
		border-radius: inherit;
		transform-origin: inherit;
		transform: 
			translate3d(calc(var(--s)*-20%), 0, -1px) 
			rotate(calc(var(--s)*-1.5deg))
			scale(.8, .9);
		background: rgba(#000, .35);
		filter: blur(9px);
		content: var(--wide, '')
	}
	
	&:nth-child(odd) { --parity: 0 }
}

h3 {
	align-self: center;
	justify-self: var(--parity, self-end);
	padding: $hd3-p 0;
	font-size: 1.5em;
	text-transform: capitalize;
}

p {
	grid-column-end: span calc(1 + var(--j));
	text-align: var(--wide, var(--parity, right));
}