- var data = [
-   {
-     slist: ['#9274b7', '#3b4a8d'], 
-     icon: '📊', 
-     title: 'gingerbread', 
-     ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
-   }, 
-   {
-     slist: ['#d14498', '#91287d'], 
-     icon: '⚙️', 
-     title: 'brownie', 
-     ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
-   }, 
-   {
-     slist: ['#f6671f', '#c01b1c'], 
-     icon: '🏠', 
-     title: 'ice cream', 
-     ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
-   }, 
-   {
-     slist: ['#fec22f', '#ea9826'], 
-     icon: '💡', 
-     title: 'lava cake', 
-     ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
-   }, 
-   {
-     slist: ['#cfdc45', '#89b343'], 
-     icon: '⏰', 
-     title: 'macaroon', 
-     ptext: 'Cake muffin donut chocolate cake jelly sesame snaps wafer tart pie sweet roll muffin chupa chups.'
-   }, 
-   {
-     slist: ['#6fc6a9', '#058ba9'], 
-     icon: '🎯', 
-     title: 'chocolate', 
-     ptext: 'Cake cookie lemon drops muffin sugar plum. Liquorice pudding sugar plum topping macaroon pie chocolate.'
-   }
- ];
- var n = data.length;

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

$art-w: 22.5em;
$art-h: .5*$art-w;
$mid-d: 1em;
$num-w: 4.5em;
$num-h: 2*$num-w;
$num-s: 2;
$num-l: 2;
$num-r: .75em;
$ico-s: 3;

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  --wide: 1;
  --p: var(--narr, 0);
  --q: calc(1 - var(--p));
  display: grid;
  grid-template-columns: repeat(calc(var(--wide) + 1), 1fr);
  grid-gap: calc(var(--p)*.5em) 2.5em;
  padding: 0 calc(var(--q)*.75em);
  background: #bdc5c8;
  
  @media (max-width: 768px) { --wide: 0 }
  
  @media (max-width: 400px) { --narr: 1 }
}

article {
  --i: var(--parity, 0);
  --j: calc(1 - var(--i));
  --s: calc(1 - 2*var(--i));
  box-sizing: border-box;
  display: grid;
  grid-auto-flow: column;
  grid-gap: .5em $num-l*$num-s*1em;
  justify-self: var(--parity, self-end);
  position: relative;
  padding: calc(.5*var(--q)*#{$art-h - $num-s*$num-w} + var(--p)*#{$num-l*$num-s*1em}) 0 .5*($art-h - $num-s*$num-w);
  width: calc(var(--q)*#{$art-w} + var(--p)*100%); min-height: $art-h;
  transform: translatey(calc(var(--wide)*var(--i)*.3125*#{$art-h}));
  transform-style: preserve-3d;
  background: radial-gradient(at calc(var(--j)*100%), rgba(#000, .43), transparent 70%) calc(var(--j)*100%) 50%/ calc(var(--q)*.625em) 105% no-repeat;
  font: 1em/ 1.25 oswald, sans-serif;
  counter-increment: c;
  
  &:before {
    position: absolute;
    right: calc(var(--q)*(var(--i)*100% - var(--i)*#{$num-w}));
    bottom: calc(var(--q)*50%);
    width: calc(var(--q)*#{$num-w} + var(--p)*100%);
    height: calc(var(--q)*#{$num-h} + var(--p)*100%);
    border-radius: $num-r $num-r 0 0;
    transform-origin: calc(var(--j)*100%) 100%;
    transform: rotate(calc(var(--s)*var(--q)*-90deg)) 
      translate3d(calc(var(--s)*var(--q)*50%), 0, -1px);
    background: linear-gradient(#fff $num-l*1em, var(--slist));
    font-size: $num-s*1em;
    line-height: $num-l;
    text-align: center;
    filter: drop-shadow(calc(var(--s)*var(--q)*-.25em) -.25em .5em rgba(#000, .5));
    content: counter(c, decimal-leading-zero) ' STEP'
  }
  
  &:after {
    grid-column: calc(1 + var(--i));
    grid-row: 1/ span calc(2 - var(--p));
    align-self: center;
    font-size: $ico-s*1em;
    text-align: center;
    filter: grayscale(1);
    content: attr(data-icon)
  }
  
  &:nth-of-type(2n) {
    --parity: 1;
  }
}

h3, p {
  box-sizing: border-box;
  padding: .125em .625rem;
  text-align: var(--narr, var(--parity, right));
  color: #fff;
}

h3 {
  align-self: center;
  text-transform: uppercase;
}

p {
  grid-column: calc(1 + var(--j)*var(--q))/ span calc(1 + var(--p));
  grid-row: 2;
}