- var data = [
- 	{
- 		year: 1997, 
- 		slist: ['#fff251', '#ffb258'], 
- 		title: 'gingerbread', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		year: 2001, 
- 		slist: ['#fdb970', '#ff8588'], 
- 		title: 'brownie', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		year: 2005, 
- 		slist: ['#fc7190', '#d2659e'], 
- 		title: 'ice cream', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		year: 2010, 
- 		slist: ['#de99cf', '#9d5a86'], 
- 		title: 'lava cake', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		year: 2016, 
- 		slist: ['#50ccca', '#4aa3b5'], 
- 		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++)
	article(data-year=data[i].year 
					style=`--idx: ${i}; --slist: ${data[i].slist}`)
		h3 #{data[i].title}
		p #{data[i].ptext}

$bar-w: 21.75rem;
$bar-h: 4.5rem;
$bar-r: .5*$bar-h;
$bar-x: .75rem;
$bar-r0: calc(var(--k)*var(--p)*#{$bar-r});
$bar-r1: calc(var(--k)*var(--q)*#{$bar-r});
$bar-r2: calc(var(--k)*var(--p)*#{$bar-r + $bar-x});
$bar-r3: calc(var(--k)*var(--q)*#{$bar-r + $bar-x});
$art-w: 18.75rem;
$art-h: 13.5rem;
$art-b: .75rem;
$gap: 5*$bar-r;
$solid: linear-gradient(red, red);

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

html {
	--i: var(--wide, 1);
	--j: calc(1 - var(--i));
	--narr: 0;
	--k: calc(1 - var(--narr));
	font: 500 1em/ 1.25 koho, trebuchet ms, verdana, sans-serif;
	transition: .3s;
	
	@media (max-width: 2*($art-w + $bar-x) + $gap) { --wide: 0 }

	@media (max-width: $bar-w) { --narr: 1 }
	
	@media (max-width: 12em) { font-size: .75em }
}

body {
	display: grid;
	grid-template: 
		repeat(var(--n), 1fr)/ 
		repeat(calc(var(--i) + 1), calc(var(--k)*#{$art-w} + var(--narr)*100%));
	grid-gap: 0 $gap;
	place-content: center;
	overflow-x: hidden;
	margin-top: 1em;
	padding-top: calc(var(--i)*#{$bar-h});
	background: repeating-linear-gradient(
			transparent 0, transparent $bar-h, 
			currentcolor 0, currentcolor $art-h - $bar-h)
		50% 1em/ calc(var(--i)*2px) calc((.5*(var(--n) + .5))*#{$art-h}) content-box no-repeat, 
		linear-gradient(rgba(#eee, .85), rgba(#eee, .85)), 
		url(https://images.unsplash.com/photo-1516639019654-02afb288592f?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=f06123d5f771b36e4ef8016f84598114) 50%/ cover	
}

article {
	--p: var(--parity, 0);
	--q: calc(1 - var(--p));
	--s: calc(1 - 2*var(--p));
	grid-row: calc(var(--idx) + 1);
	grid-column: calc(var(--i)*var(--p) + 1);
	position: relative;
	margin-top: calc(var(--i)*#{-$bar-h});
	border-bottom: solid $art-b transparent;
	max-width: 100%; min-height: $art-h;
	background: 
		linear-gradient(#f2f2f2, #f2f2f2) padding-box, 
		radial-gradient(at 50% 0, rgba(#000, .3), transparent 70%) 
			50% 100%/ 115% $art-b border-box;
	color: #222;
	
	&:before {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: calc(var(--k)*(var(--q)*#{-$bar-x} + var(--p)*#{-$bar-r}));
		border-bottom: solid calc(var(--k)*#{$bar-x}) transparent;
		width: calc(var(--k)*#{$bar-w} + var(--narr)*100%);
		height: calc(#{$bar-h} + var(--k)*#{$bar-x});
		border-radius: $bar-r0 $bar-r1 $bar-r1 $bar-r0 /
			#{$bar-r0 $bar-r1 $bar-r3 $bar-r2};
		background: 
			linear-gradient(calc(var(--s)*90deg), var(--slist)) padding-box, 
			linear-gradient(calc(var(--s)*90deg), var(--slist) $bar-x, #e6e6e6 0) 
			calc(var(--p)*100%) 0/ #{$bar-w - $bar-h} no-repeat border-box;
		color: #fff;
		font-size: 2*$bar-h/3;
		font-weight: 300;
		text-shadow: calc(var(--s)*-1px) 1px 2px rgba(#000, .85);
		clip-path: 
			polygon(calc(var(--p)*100%) 0, 
							calc(var(--q)*100%) 0, 
							calc(var(--q)*100%) 100%, 
							calc(var(--q)*100% - var(--s)*#{$bar-h}) $bar-h, 
							calc(var(--p)*100% + var(--s)*#{$bar-x}) 100%, 
							calc(var(--p)*100%) $bar-h);
		content: attr(data-year)
	}
	
	&:after {
		position: absolute;
		top: 0; 
		left: calc(var(--q)*(100% - #{$bar-h}) + var(--s)*#{.5*$gap + $bar-r});
		border: solid $bar-r/3 transparent;
		padding: $bar-r/3;
		width: $bar-h; height: $bar-h;
		border-radius: 50%;
		transform: scale(var(--i));
		background: 
			linear-gradient(calc(var(--s)*90deg), var(--slist)) content-box, 
			linear-gradient(calc(var(--s)*90deg), var(--slist)) border-box;
		--m: var(--mid, ) #{$solid} padding-box, #{$solid} border-box;
		mask: var(--m);
		mask-composite: exclude;
		content: ''
	}
	
	&:nth-of-type(2n) { --parity: 1 }
	
	&:first-of-type, &:last-of-type {
		--mid: #{$solid} content-box #{unquote(',')}
	}
}

h3, p { padding: 0 .75rem }

h3 {
	margin-top: .25em;
	font-size: 1.375em;
	font-weight: 600;
	line-height: 2;
	text-transform: uppercase
}