- var data = [
-   {
-     name: 'Yogi Bear', 
-     quote: 'Smaaaarter than the average bear!'
-   }, 
-   {
-     name: 'Boo Boo', 
-     quote: 'The ranger isn\'t going to like this...'
-   }, 
-   {
-     name: 'Cindy Bear', 
-     quote: 'Oh, that\'s Yogi...'
-   }, 
-   {
-     name: 'Ranger Smith', 
-     quote: 'Stole a picnic basket?! Yogiii!!!'
-   }
- ].reverse();
- var n = data.length;

header Resize the damn window
while n--
  article
    h3 #{data[n].name}
    section
      p #{data[n].quote}
      a(href='#') go

@import 'compass/css3';

$m: 1rem;
$p: .5rem;
$min-w: 15rem;
$color-map: 
  #0f414c #79e9fd, 
  #673a01 #ddac43, 
  #291c52 #bba9ff, 
  #36480c #b0d65f;

* { margin: 0; padding: 0 }

html {
  --i: -1;
  --j: -1;
  --r: 0px;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1496481995273-1ba7de6c24fd?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=63d82148afc0fe5a35f9752b4d511d82) 50%/ cover #777;
  background-blend-mode: luminosity
}

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding-top: 4em;
  max-width: 1000px;
  font: 1em/1.5 trebuchet ms, verdana, sans-serif;
}

header {
  margin: $m;
  padding: 1em 0;
  border-radius: .5em;
  min-width: 95%;
  background: #fff;
  text-align: center;
}

article {
  overflow: hidden;
  margin: $m;
  width: 21em;
  min-width: $min-w;
  border-radius: 1em;
  
  @for $i from 0 to 4 {
    &:nth-of-type(#{$i + 1}) {
      --c0: nth(nth($color-map, $i + 1), 1);
      --c1: nth(nth($color-map, $i + 1), 2)
    }
  }
}

h3, section {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding: $p;
  
  &:before {
    position: absolute;
    z-index: -1;
    top: calc(var(--j)*#{$m} + (1 + var(--j))*50% - var(--r));
    left: calc(var(--i)*#{$m} + (1 + var(--i))*50% - var(--r));
    padding: var(--r);
    border-radius: 50%;
    box-shadow: 0 0 0 50em;
    content: ''
  }
}

h3:before, section { color: var(--c1) }

h3 {
  justify-content: center;
  color: #fff;
  font-size: 1.75em;
  text-align: center;
  min-height: var(--r);
  
  &:before { opacity: .65 }
}

section {
  justify-content: space-between;
  min-height: calc(var(--r) - #{$m});
  
  &:before { color: var(--c0) }
}

p {
  margin-right: 1em;
  font-size: .875em;
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  
  &:after { content: ' ▶' }
}

@media (min-width: 2*($min-w + 2*$m)) {
  html { --r: 4rem }
  
  header {
    position: relative;
    
    &:before, &:after {
      position: absolute;
      left: 50%;
      content: ''
    }
    
    &:before {
      top: 100%;
      width: calc(.0625*var(--r)); height: calc(2*var(--r) + #{$m});
      transform: translate(-50%);
      background: inherit;
    }
    
    &:after {
      top: calc(3*#{$m} + 3.125*var(--r));
      border: solid calc(.375*var(--r)) transparent;
      padding: calc(.375*var(--r));
      border-radius: 50%;
      transform: translate(-50%, - 50%);
      box-shadow: 0 0 0 5px #fff;
      background: #fff padding-box;
    }
  }
  
  article {
    width: 40%;
    
    &:nth-of-type(-n + 2) { --j: 1 }
    &:nth-of-type(odd) { --i: 1 }

    &:nth-of-type(-n + 2) h3, 
    &:nth-of-type(n + 3) section {
      &:before { --r: 0 }
    }
    
    &:nth-of-type(-n + 2) section, 
    &:nth-of-type(n + 3) h3 {
      padding-right: calc(.5*(1 + var(--i))*(var(--r) - #{$m}) + #{$p});
      padding-left: calc(.5*(1 - var(--i))*(var(--r) - #{$m}) + #{$p})
    }
  }
}