- 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 }
}