- var data = [
- 	{
- 		clist: ['#f6ba96', '#e2795b'], 
- 		title: 'gingerbread', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}, 
- 	{
- 		clist: ['#a2d5d0', '#8dcbbc'], 
- 		title: 'brownie', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}, 
- 	{
- 		clist: ['#9cc884', '#86b744'], 
- 		title: 'ice cream', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}, 
- 	{
- 		clist: ['#fae791', '#f5d357'], 
- 		title: 'lava cake', 
- 		ptext: 'Soufflé cake brownie ice cream'
- 	}
- ].reverse(), n = data.length;

while n--
	article(style=`--c0: ${data[n].clist[0]}; --c1: ${data[n].clist[1]}`)
		h3 #{data[n].title}
		p #{data[n].ptext}

$fs: 5rem;
$lh: 1.25;
$shadow-h: 1.25em;

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

html {
	background: #ececea;
	font-size: 125%;
	counter: art;
	
	@media (max-width: 200px) {
		font-size: 62.5%
	}
}

article {
	--wide: 0;
	--base: calc(var(--wide)*#{$fs});
	--size: #{.25*$fs};
	--left: calc(.5*(1 + var(--wide))*#{$fs});
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	margin: 2em auto;
	padding-left: calc(var(--wide)*#{1.5*$fs});
	width: 32em; max-width: 90%;
	min-height: $lh*$fs;
	font: 1em/ #{$lh} roboto, trebuchet ms, verdana, arial, sans-serif;
	counter-increment: art;
	filter: drop-shadow(-1px 3px 3px rgba(#000, .15));
	
	@media (min-width: 640px) { --wide: 1 }
	
	&:before, &:after { position: absolute }
	
	&:before {
		left: .25em;
		color: #fff;
		font-size: var(--base);
		content: '0'counter(art)
	}
	
	&:after {
		--grad: linear-gradient(#fff, #e0e0e0);
		top: 0; right: 0; bottom: -$shadow-h; left: 0;
		z-index: -1;
		padding-left: inherit;
		border-bottom: solid .75*$shadow-h transparent;
		transform: skewx(calc(var(--wide)*-22.5deg));
		background: var(--grad) 100% 50%/ calc(100% - (var(--base) + var(--left) + var(--wide)*var(--size)) + 1px) 100% no-repeat padding-box,
			var(--grad) calc(var(--base) + (1 + 2*var(--wide))*var(--size)) 50%/ var(--size) 100% no-repeat padding-box,
			radial-gradient(ellipse at 100% 50%, rgba(#000, .13), transparent 35%) 0 50%/ var(--size) 250% content-box, 
			linear-gradient(var(--c0) 50%, var(--c1) 0) padding-box, 
			radial-gradient(rgba(#000, .1), transparent 70%) 100% 100%/ calc(100% - (var(--base) + 2*var(--size))) $shadow-h border-box no-repeat;
		content: ''
	}
}

h3, p { padding-left: var(--left) }

h3 {
	background: linear-gradient(var(--c0), var(--c1));
	-webkit-background-clip: text;
					background-clip: text;
	color: transparent;
	text-transform: capitalize;
	filter: brightness(.85)
}