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