- var data = [
- 	{
- 		txtno: 'one', 
- 		title: 'gingerbread', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		txtno: 'two', 
- 		title: 'brownie', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		txtno: 'three', 
- 		title: 'ice cream', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		txtno: 'four', 
- 		title: 'lava cake', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}
- ].reverse(), n = data.length;

while n--
	article
		h3 #{data[n].title}
		h4 step #{data[n].txtno}
		p #{data[n].ptext}

$c: #ee8c35, #ad4716;
$c0: rgba(#fff, .8);

$art-lh: 1.25; // article line height
$hd3-fs: 1.5rem; // font size
$hd4-fs: 1rem;
$hd4-lh: 3;
$par-pv: .75rem;

// WIDE CASE
$art-pv-wide: .75rem; // article vertical padding

$hd3-mv-wide: -3*$art-pv-wide;

$hd4-b-wide: .1875rem;

// generic grid rows & columns
$row-1-wide: $hd4-lh*$hd4-fs + 2*$hd4-b-wide;
$row-2-wide: 4*$art-lh*1rem + 2*$par-pv;
$col-a-wide: 17.5rem;
$col-b-wide: $row-1-wide + $row-2-wide - 2*$hd3-mv-wide;
$col-1-wide: calc(var(--q)*#{$col-a-wide} + var(--p)*#{$col-b-wide});
$col-2-wide: calc(var(--q)*#{$col-b-wide} + var(--p)*#{$col-a-wide});

// article
$art-g-wide: 2rem; // gap
$art-b-wide: .1875rem; // border
$art-ph-wide: 2*$art-g-wide; // horizontal padding
$art-mv-wide: -1.5*$hd3-mv-wide; // vertical margin
// width
$art-w-wide: $col-a-wide + $col-b-wide +
						 $art-g-wide + 2*($art-ph-wide + $art-b-wide);
// height
$art-h-wide: $row-1-wide + $row-2-wide +
						 2*$art-ph-wide + 2*$art-b-wide;
$art-r-wide: .5*$art-h-wide;
$art-sh-wide: 1em;

$hd3-pv-wide: -$hd3-mv-wide;
$hd3-r-wide: 50%;
$hd3-r0-wide: calc(var(--q)*#{$hd3-r-wide});
$hd3-r1-wide: calc(var(--p)*#{$hd3-r-wide});
$num-f-wide: 4;

$hd4-r-wide: .375*$row-1-wide;

// NORM CASE
$hd3-lh-norm: 3;

$row-1-norm: $hd3-lh-norm*$hd3-fs;
$row-2-norm: $hd4-lh*$hd4-fs;
$col-1-norm: 100%;

$art-mv-norm: 1em;
$art-p-norm: 2vw;
$art-w-norm: 100%;
$art-sh-norm: .375em;

$num-f-norm: 1;

$hd4-w-norm: 50%;
$hd4-r-norm: .5*$row-2-norm;

$par-pl-norm: 2.5em;
$par-ti-norm: 2em;

// UNIF CASE
$row-1: calc(var(--i)*#{$row-1-wide} + var(--j)*#{$row-1-norm});
$row-2: calc(var(--i)*#{$row-2-wide} + var(--j)*#{$row-2-norm});
$row-3: minmax(0, auto);
$col-1: calc(var(--i)*#{$col-1-wide} + var(--j)*#{$col-1-norm});
$col-2: calc(var(--i)*#{$col-2-wide});

$art-g: calc(var(--i)*#{$art-g-wide});
$art-mv: calc(var(--i)*#{$art-mv-wide} + var(--j)*#{$art-mv-norm});
$art-b: calc(var(--i)*#{$art-b-wide});
$art-pv: calc(var(--i)*#{$art-pv-wide} + var(--j)*#{$art-p-norm});
$art-ph: calc(var(--i)*#{$art-ph-wide} + var(--j)*#{$art-p-norm});
$art-w: calc(var(--i)*#{$art-w-wide} + var(--j)*#{$art-w-norm});
$art-r: calc(var(--i)*#{$art-r-wide});
$art-sh: calc(var(--i)*#{$art-sh-wide} + var(--j)*#{$art-sh-norm});

$hd3-mv: calc(var(--i)*#{$hd3-mv-wide});
$hd3-pv: calc(var(--i)*#{$hd3-pv-wide});
$hd3-r0: calc(var(--i)*#{$hd3-r0-wide});
$hd3-r1: calc(var(--i)*#{$hd3-r1-wide});
$hd3-lh: calc(var(--i) + var(--j)*#{$hd3-lh-norm});
$num-f: calc(var(--i)*#{$num-f-wide} + var(--j)*#{$num-f-norm});

$hd4-b: calc(var(--i)*#{$hd4-b-wide});
$hd4-w: calc(100% - var(--k)*#{$hd4-w-norm});
$hd4-r: calc(var(--i)*#{$hd4-r-wide} + var(--j)*#{$hd4-r-norm});

$par-pl: calc(var(--k)*#{$par-pl-norm});
$par-ti: calc(var(--k)*#{$par-ti-norm});

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

html {
	--i: var(--wide, 1);
	--j: calc(1 - var(--i));
	--k: calc(1 - var(--narr, 0));
	height: 100%;
	/* test background *
	background: 
		repeating-linear-gradient(-45deg, 
				gainsboro 0, gainsboro 2px, 
				transparent 0, transparent 5px);
	/* live background */
	background: linear-gradient($c0, $c0), 
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg) 
			50%/ cover fixed;/**/
	font: 400 1em/ #{$art-lh} trebuchet ms, arial, sans-serif;
	
	@media (max-width: $art-w-wide + 2rem) { --wide: 0 }
	
	@media (max-width: 350px) { --narr: 1 }
	
	@media (max-width: 240px) { font-size: .75em }
}

article {
	--p: var(--parity, 0);
	--q: calc(1 - var(--p));
	--s: calc(1 - 2*var(--p));
	display: grid;
	grid-template: #{$row-1} #{$row-2} #{$row-3}/ #{$col-1} #{$col-2};
	grid-gap: 0 $art-g;
	grid-auto-flow: column dense;
	margin: $art-mv auto;
	border: solid $art-b transparent;
	padding: $art-pv $art-ph;
	width: $art-w;
	border-radius: $art-r;
	box-shadow: $art-sh $art-sh calc(3*#{$art-sh}) rgba(#000, .5);
	background: 
		linear-gradient(calc(var(--s)*90deg), #e6e6e6, #ececec) padding-box, 
		linear-gradient(to right bottom, #fff, #c8c8c8) border-box;
	counter-increment: idx;
	
	&:nth-child(2n) { --parity: 1 }
}

h3 {
	grid-column: calc(1 + var(--i)*var(--q));
	grid-row: 1/ span calc(1 + 2*var(--i));
	margin: $hd3-mv 0;
	border: solid $art-b transparent;
	padding: $hd3-pv $hd3-pv;
	border-radius: $hd3-r0 $hd3-r1;
	box-shadow: inherit;
	background: 
		linear-gradient(calc(var(--s)*45deg), $c) padding-box, 
		linear-gradient(calc(var(--s)*-45deg), $c) border-box;
	color: #fff;
	font-size: $hd3-fs;
	font-weight: 400;
	line-height: $hd3-lh;
	text-align: center;
	
	&:before {
		font-size: calc(#{$num-f}*1em);
		font-weight: 900;
		text-shadow: -2px -1px #999;
		content: counter(idx, decimal-leading-zero) ' '
	}
}

h4 {
	display: flex;
	align-items: center;
	justify-content: center;
	border: solid $hd4-b nth($c, 1);
	width: $hd4-w;
	border-radius: $hd4-r;
	color: nth($c, 2);
	text-transform: capitalize;
	
	&:before {
		margin-right: .25em;
		border: solid 2px currentcolor;
		width: 1em; height: 1em;
		font-size: 1.75em;
		line-height: .8125;
		border-radius: 50%;
		text-align: center;
		content: '+'
	}
}

p {
	padding: $par-pv 0;
	padding-left: $par-pl;
	text-indent: $par-ti;
}