- var data = [
- 	{
- 		slist: ['#178ccd', '#156599'], 
- 		icon: '🍇', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#a5c73f', '#3e7e27'], 
- 		icon: '🍐', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}, 
- 	{
- 		slist: ['#f6c232', '#eca122'], 
- 		icon: '🍋', 
- 		ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
- 	}, 
- 	{
- 		slist: ['#d63193', '#a52178'], 
- 		icon: '🍒', 
- 		ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
- 	}
- ];
- var n = data.length;

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

$bar-w: 27em;
$bar-h: 7.5em;
$bar-b: 5vmin;
$bar-p: .5em;
$rng-r: .5*$bar-h;
$rng-w: 1em;
$rng-p: .375em;
$ico-f: 2;
$ico-p: .5*$rng-p/$ico-f;
$ico-a: $bar-h - 2*($rng-w + $rng-p);
$ico-s: $ico-a/$ico-f;
$ico-d: $ico-f*1em;
$solid: linear-gradient(red, red);
$c0: rgba(#fff, .8);

html {
	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;/**/
}

body {
	--i: var(--wide, 1);
	--j: calc(1 - var(--i));
	--k: var(--narr, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 100%;
	filter: drop-shadow(0 2px 5px rgba(#000, .65));
	
	@media (max-width: $bar-w + .5*$bar-h) { --wide: 0 }
	
	@media (min-width: 400px) { --narr: 0 }
}

p {
	--p: var(--parity, 0);
	--q: calc(1 - var(--p));
	--s: calc(1 - 2*var(--p));
	box-sizing: border-box;
	display: flex;
	flex-direction: var(--narr, column);
	align-items: center;
	justify-content: space-around;
	position: relative;
	margin: 
		.5em
		calc(var(--i)*var(--p)*#{.5*$bar-h})
		0
		calc(var(--i)*var(--q)*#{.5*$bar-h});
	border: solid 0 transparent;
	border-width: 
		0
		calc(var(--q)*#{$bar-b})
		0
		calc(var(--p)*#{$bar-b});
	padding: 
		$bar-p
		calc((var(--j) + var(--i)*var(--q))*#{$bar-p})
		$bar-p
		calc((var(--j) + var(--i)*var(--p))*#{$bar-p});
	max-width: $bar-w;
	min-height: $bar-h;
	background: 
		linear-gradient(#fcfcfc, gainsboro) padding-box, 
		linear-gradient(calc(var(--s)*90deg), var(--c0), var(--c1)) 
			calc(var(--q)*100%)/ #{$bar-b} 100%;
	color: var(--c1);
	font: 900 calc((1.25 - .375*var(--k))*1em)/ 1.5 trebuchet ms, verdana, sans-serif;
	text-align: var(--parity, right);
	text-transform: uppercase;
	
	&:before, &:after {
		box-sizing: border-box;
		min-width: var(--d); height: var(--d);
		border-radius: 50%
	}
	
	&:before {
		--d: #{$ico-d};
		display: flex;
		align-items: center;
		justify-content: center;
		order: calc((1 - var(--k))*var(--p));
		margin: 
			0
			calc(var(--i)*var(--p)*#{-.5*$ico-d} + var(--q)*#{$bar-p})
			0
			calc(var(--i)*var(--q)*#{-.5*$ico-d} + var(--p)*#{$bar-p});
		padding: $ico-p;
		background: 
			linear-gradient(var(--c1), var(--c0)) content-box, 
			linear-gradient(var(--c0), var(--c1));
		font-size: calc(#{$ico-s}/(1 + var(--k)));
		content: attr(data-icon)
	}
	
	&:after {
		--d: #{$bar-h};
		position: absolute;
		z-index: -1;
		left: calc(var(--p)*(100% - var(--d)) - var(--s)*.5*var(--d));
		padding: $rng-w;
		background: linear-gradient(90deg, var(--c0), var(--c1), var(--c0));
		mask: #{$solid} content-box exclude, #{$solid};
		content: var(--wide, '')
	}
	
	&:nth-child(2n) { --parity: 1 }
}