- var data = [
-   {
-     clist: ['#f6ba96', '#e2795b'], 
-     title: 'gingerbread', 
-     ptext: 'Soufflé cake brownie ice cream'
-   }, 
-   {
-     clist: ['#a2d5d0', '#8dcbbc'], 
-     title: 'brownie', 
-     ptext: 'Soufflé cake brownie ice cream'
-   }, 
-   {
-     clist: ['#9cc884', '#86b744'], 
-     title: 'ice cream', 
-     ptext: 'Soufflé cake brownie ice cream'
-   }, 
-   {
-     clist: ['#fae791', '#f5d357'], 
-     title: 'lava cake', 
-     ptext: 'Soufflé cake brownie ice cream'
-   }
- ].reverse(), n = data.length;

while n--
  article(style=`--c0: ${data[n].clist[0]}; --c1: ${data[n].clist[1]}`)
    h3 #{data[n].title}
    p #{data[n].ptext}

$fs: 5rem;
$lh: 1.25;
$shadow-h: 1.25em;

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

html {
  background: #ececea;
  font-size: 125%;
  counter: art;
  
  @media (max-width: 200px) {
    font-size: 62.5%
  }
}

article {
  --wide: 0;
  --base: calc(var(--wide)*#{$fs});
  --size: #{.25*$fs};
  --left: calc(.5*(1 + var(--wide))*#{$fs});
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  margin: 2em auto;
  padding-left: calc(var(--wide)*#{1.5*$fs});
  width: 32em; max-width: 90%;
  min-height: $lh*$fs;
  font: 1em/ #{$lh} roboto, trebuchet ms, verdana, arial, sans-serif;
  counter-increment: art;
  filter: drop-shadow(-1px 3px 3px rgba(#000, .15));
  
  @media (min-width: 640px) { --wide: 1 }
  
  &:before, &:after { position: absolute }
  
  &:before {
    left: .25em;
    color: #fff;
    font-size: var(--base);
    content: '0'counter(art)
  }
  
  &:after {
    --grad: linear-gradient(#fff, #e0e0e0);
    top: 0; right: 0; bottom: -$shadow-h; left: 0;
    z-index: -1;
    padding-left: inherit;
    border-bottom: solid .75*$shadow-h transparent;
    transform: skewx(calc(var(--wide)*-22.5deg));
    background: var(--grad) 100% 50%/ calc(100% - (var(--base) + var(--left) + var(--wide)*var(--size)) + 1px) 100% no-repeat padding-box,
      var(--grad) calc(var(--base) + (1 + 2*var(--wide))*var(--size)) 50%/ var(--size) 100% no-repeat padding-box,
      radial-gradient(ellipse at 100% 50%, rgba(#000, .13), transparent 35%) 0 50%/ var(--size) 250% content-box, 
      linear-gradient(var(--c0) 50%, var(--c1) 0) padding-box, 
      radial-gradient(rgba(#000, .1), transparent 70%) 100% 100%/ calc(100% - (var(--base) + 2*var(--size))) $shadow-h border-box no-repeat;
    content: ''
  }
}

h3, p { padding-left: var(--left) }

h3 {
  background: linear-gradient(var(--c0), var(--c1));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-transform: capitalize;
  filter: brightness(.85)
}