- var data = [
- 	{
- 		slist: ['#51a9ad', '#438c92'], 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#ebb134', '#c2912a'], 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#db4453', '#a8343f'], 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#7eb138', '#6d982d'], 
- 		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++)
	p(style=`--slist: ${data[i].slist}`) #{data[i].ptext}

$lin-h: 1.5;
$num-d: $lin-h*1em;
$off-x: -2em;
$off-y: -1.5em;

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

html {
	--narr: 0;
	--comp: calc(1 - var(--narr));
	--wide: 1;
	min-height: 100vh;
	/* test background */
	background: 
		repeating-linear-gradient(-45deg, 
				gainsboro 0, gainsboro 2px, 
				transparent 0, transparent 5px);
	/* live background *
	background: linear-gradient(90deg, rgba(#e0e0e0, .85), rgba(#fff, .85)), 
		url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg) 
			50%/ cover fixed;/**/
	font: 400 calc(.5rem + var(--comp)*.5rem + var(--narr)*2vw)/ #{$lin-h} 
		open sans, trebuchet ms, verdana, arial, sans-serif;
	
	@media (max-width: 36em) { --wide: 0 }
	
	@media (max-width: 20em) { --narr: 1 }
}

body { overflow-x: hidden }

p {
	--parity: 0;
	--sign: calc(1 - 2*var(--parity));
	display: flex;
	align-items: center;
	position: relative;
	margin: 6.25em auto 0;
	padding: 1em;
	min-width: 160px; min-height: 6.5em;
	width: calc(var(--comp)*80% + var(--narr)*100%);
	max-width: 35em;
	background: linear-gradient(90deg, #fcfcfc, #ececec);
	counter-increment: idx;
	
	&, &:before, &:after { box-shadow: -1rem 1rem 2rem rgba(#000, .2) }
	
	&:before, &:after { position: absolute }
	
	&:before {
		z-index: -1;
		bottom: calc(100% - .5em);
		left: calc(var(--parity)*(100% - #{$num-d}) - var(--wide)*var(--sign)*1em);
		width: $num-d;
		background: linear-gradient(90deg, var(--slist));
		color: #fff;
		font-size: 4em;
		text-align: center;
		transition: .3s;
		content: counter(idx, decimal-leading-zero)
	}
	
	&:after {
		z-index: -2;
		top: $off-y; 
		right: calc(var(--comp)*#{$off-x}); 
		bottom: $off-y; 
		left: calc(var(--comp)*#{$off-x});
		background: linear-gradient(90deg, #f0f0f0, #ededed);
		content: ''
	}
	
	&:nth-child(2n) { --parity: 1 }
}