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