- var data = [
- 	{
- 		slist: ['#9274b7', '#3b4a8d'], 
- 		icon: '📊', 
- 		title: 'gingerbread', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#d14498', '#91287d'], 
- 		icon: '⚙️', 
- 		title: 'brownie', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#f6671f', '#c01b1c'], 
- 		icon: '🏠', 
- 		title: 'ice cream', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#fec22f', '#ea9826'], 
- 		icon: '💡', 
- 		title: 'lava cake', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#cfdc45', '#89b343'], 
- 		icon: '⏰', 
- 		title: 'macaroon', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#6fc6a9', '#058ba9'], 
- 		icon: '🎯', 
- 		title: 'chocolate', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}
- ];
- var n = data.length;

- for(var i = 0; i < n; i++)
	article(data-icon=`${data[i].icon}` style=`--slist: ${data[i].slist[0]} 0, ${data[i].slist[1]}`)
		h3 #{data[i].title}
		p #{data[i].ptext}

$art-w: 22.5em;
$art-h: .5*$art-w;
$mid-d: 1em;
$num-w: 4.5em;
$num-h: 2*$num-w;
$num-s: 2;
$num-l: 2;
$num-r: .75em;
$ico-s: 3;

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

body {
	--wide: 1;
	--p: var(--narr, 0);
	--q: calc(1 - var(--p));
	display: grid;
	grid-template-columns: repeat(calc(var(--wide) + 1), 1fr);
	grid-gap: calc(var(--p)*.5em) 2.5em;
	padding: 0 calc(var(--q)*.75em);
	background: #bdc5c8;
	
	@media (max-width: 768px) { --wide: 0 }
	
	@media (max-width: 400px) { --narr: 1 }
}

article {
	--i: var(--parity, 0);
	--j: calc(1 - var(--i));
	--s: calc(1 - 2*var(--i));
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: column;
	grid-gap: .5em $num-l*$num-s*1em;
	justify-self: var(--parity, self-end);
	position: relative;
	padding: calc(.5*var(--q)*#{$art-h - $num-s*$num-w} + var(--p)*#{$num-l*$num-s*1em}) 0 .5*($art-h - $num-s*$num-w);
	width: calc(var(--q)*#{$art-w} + var(--p)*100%); min-height: $art-h;
	transform: translatey(calc(var(--wide)*var(--i)*.3125*#{$art-h}));
	transform-style: preserve-3d;
	background: radial-gradient(at calc(var(--j)*100%), rgba(#000, .43), transparent 70%) calc(var(--j)*100%) 50%/ calc(var(--q)*.625em) 105% no-repeat;
	font: 1em/ 1.25 oswald, sans-serif;
	counter-increment: c;
	
	&:before {
		position: absolute;
		right: calc(var(--q)*(var(--i)*100% - var(--i)*#{$num-w}));
		bottom: calc(var(--q)*50%);
		width: calc(var(--q)*#{$num-w} + var(--p)*100%);
		height: calc(var(--q)*#{$num-h} + var(--p)*100%);
		border-radius: $num-r $num-r 0 0;
		transform-origin: calc(var(--j)*100%) 100%;
		transform: rotate(calc(var(--s)*var(--q)*-90deg)) 
			translate3d(calc(var(--s)*var(--q)*50%), 0, -1px);
		background: linear-gradient(#fff $num-l*1em, var(--slist));
		font-size: $num-s*1em;
		line-height: $num-l;
		text-align: center;
		filter: drop-shadow(calc(var(--s)*var(--q)*-.25em) -.25em .5em rgba(#000, .5));
		content: counter(c, decimal-leading-zero) ' STEP'
	}
	
	&:after {
		grid-column: calc(1 + var(--i));
		grid-row: 1/ span calc(2 - var(--p));
		align-self: center;
		font-size: $ico-s*1em;
		text-align: center;
		filter: grayscale(1);
		content: attr(data-icon)
	}
	
	&:nth-of-type(2n) {
		--parity: 1;
	}
}

h3, p {
	box-sizing: border-box;
	padding: .125em .625rem;
	text-align: var(--narr, var(--parity, right));
	color: #fff;
}

h3 {
	align-self: center;
	text-transform: uppercase;
}

p {
	grid-column: calc(1 + var(--j)*var(--q))/ span calc(1 + var(--p));
	grid-row: 2;
}