- let items = [
- 	{ name: 'orange', text: 'Fruit of the citrus species Citrus aurantium', list: ['#fd4617', '#ffc445'] }, 
- 	{ name: 'lemon', text: 'A hybrid between bitter orange and citron', list: ['#ffaa5a', '#fff05a'] }, 
- 	{ name: 'pear', text: 'Enjoyed since prehistoric times.', list: ['#96c93d', '#00b09b'] }, 
- 	{ name: 'blueberry', text: 'Pale greenish, then reddish and dark purple.', list: ['#3da5d9', '#54f2f2'] }
- ];
- let n = items.length;

body(style=`--n: ${n}`)
	svg.hid
		symbol#ico0(viewBox='-9 -9 98 98')
			path.d(d=`M12 50h57`)
			path(d=`M40 14h-32v42h64v-21` stroke-linejoin='round')
			path.d.t(d=`M52 20h17`)
			path(d=`M47 9a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h6v5l5-5h15a3 3 0 0 0 3-3v-16a3 3 0 0 0-3-3zM33 57v4M47 57v4M26 66v-1a3 3 0 0 1 3-3h22a3 3 0 0 1 3 3v1z`)
		symbol#ico1(viewBox='-9 -9 98 98')
			path(d=`M8 17h64v22a6 6 0 0 1-6 6h-52a6 6 0 0 1-6-6zM8 39v28h64v-28M28 16v-4a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v4M34 10h13`)
			path.d(d=`M12 47v16h56v-17`)
			path.d.t(d='M40 38h1')
			path.t(d='M27 16h2M51 16h2')
		symbol#ico2(viewBox='-9 -9 98 98')
			path(d=`M10 33v37h60v-37M40 7l32 20v7l-32-20-32 20v-7zM32 26v10h16v-10zM40 27v8M32 69v-24h16v24`)
			path.d(d=`M11 63h21M49 63h21`)
			path.d(d=`M44 59h1` style='--s: 3')
		symbol#ico3(viewBox='-9 -9 98 98')
			path.d(d=`M51 20v5`)
			path.d.t(d=`M32 46v1M48 46v1`)
			path(d=`M22 51q0 15 15 19q3 2 6 0q15-4 15-19c4 0 2-1 4-5c1-2-2-4-4-3q1-13-7-15c-7 8-28 0-29 15c-2-1-5 1-4 3c2 4 0 5 4 5M20 42c-2-9 1-13-6-17q24-25 37-9q16 3 9 26`)
	- for(let i = 0; i < n; i++)
		section(style=items[i].list.map((c, i) => `--c${i}: ${c}`).join('; '))
			h3 #{items[i].name}
			p #{items[i].text}
			.ico
				a(href='#')
					svg
						use(xlink:href=`#ico${i}`)

$n: 4; // has to match number of items in HTML 😭
$wmax: 12.5em;
$wmin: 7.5em;
$hgap: 2em;
$ring: .625em;
$wbar: .375em;
$dosc: 2.875em;
$line: 2px;
$rad0: .5em;
$rad1: .75*$rad0;
$rad2: 1.25*$rad0;
$rad3: .5*$rad0;
$aamp: 8deg;

* { margin: 0; font: inherit }

%osc {
	border-radius: 50%;
	transform-origin: 50% 0;
	transform: rotate(-$aamp);
	animation: osc .3s ease-in-out infinite alternate
}

@keyframes osc { to { transform: rotate($aamp) } }

body {
	--narr: 1;
	--notnarr: calc(1 - var(--narr));
	--wide: 0;
	--notwide: calc(1 - var(--wide));
	--nor: calc(var(--notnarr)*var(--notwide));
	--or: calc(1 - var(--nor));
	--sum: calc(1 + var(--narr));
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	overflow-x: hidden;
	min-height: 100vh;
	background: 
		linear-gradient(to right top, #ebedec, #e3e7e6, #dbe1e0, #d3dadb, #ccd4d6);
	
	&:before {
		--uw: calc(var(--nor)*(100% - var(--n)*#{$hgap})/var(--n) + 
							 var(--or)*#{$wmax});
		position: absolute;
		top: 50%; right: 0; left: 0;
		height: calc(var(--sum)*2*var(--uw));
		transform: translate(calc(var(--sum)*50%/var(--n)), -50%);
		background: 
			radial-gradient(circle at calc(50% - #{2*$rad0}) calc(39% - #{2*$rad0}), 
					#fff calc(#{$rad3} - 1px), rgba(#fff, 0) $rad3), 
			radial-gradient(circle at calc(50% + #{2*$rad0}) calc(39% - #{2*$rad0}), 
					#fff calc(#{$rad3} - 1px), rgba(#fff, 0) $rad3), 
			radial-gradient(circle at 50% 39%, 
					#fff calc(#{$rad2} - 1px), rgba(#fff, 0) $rad2);
		background-size: calc(50%/(2 - var(--narr))) calc(100%/(1 + var(--narr)));
		clip-path: inset(0 calc(var(--sum)*25%) 0 0);
		filter: drop-shadow(5px 5px 4px rgba(#000, .2));
		content: '';
	
		@media (max-width: 480px) { display: none }
	}
	
	@media (min-width: $n*($wmin + $hgap)) { --narr: 0 }
	
	@media (min-width: $n*($wmax + $hgap)) { --wide: 1 }
}

.hid {
	position: absolute;
	clip-path: inset(50%);
}

path {
	--s: 2;
	fill: none;
	stroke: currentcolor;
	stroke-width: var(--s);
	stroke-linecap: round;
	
	&.d { stroke-dasharray: 0 calc(2*var(--s)) }
	
	&.t { --s: 4 }
}

section {
	display: flex;
	flex-direction: column;
	padding: 1em .5*$hgap;
	min-width: $wmin;
	width: calc(var(--nor)*(100% - var(--n)*#{$hgap})/var(--n) + var(--or)*#{$wmax});
	font-family: sans-serif;
	text-align: center;
	text-transform: uppercase
}

h3, a { color: var(--c0) }

h3 {
	padding: 1em 0 .5em; 
	font-size: calc(var(--nor)*2vw + var(--or)*1.16em)
}

p { height: 3em; font-size: .75em }

.ico {
	order: -1;
	position: relative;
	margin-bottom: calc(100% + #{$dosc} + #{$line});
	border-radius: 50%;
	box-shadow: 
		inset 0 0 0 $ring #fff, 
		11px 11px 12px -9px rgba(27, 14, 0, .28);
	background: linear-gradient(135deg, var(--c0), var(--c1)) padding-box;
	
	a {
		--sgn: 1;
		box-sizing: border-box;
		display: grid;
		place-content: center;
		padding: 50%;
		width: 0; height: 0;
		border-radius: 50%;
		clip-path: circle(calc(50% - #{$ring}));
		
		&:hover { --sgn: -1 }
	}
	
	svg {
		--w: calc(100% - #{2*$hgap});
		box-sizing: border-box;
		position: absolute;
		margin: calc(-.5*var(--w));
		border: solid .5*$hgap transparent;
		width: var(--w); height: var(--w);
		border-radius: 50%;
		@extend %osc;
		box-shadow: calc(var(--sgn)*36px) 27px 11px -5px rgba(27, 14, 0, .16);
		background: linear-gradient(135deg, #fff, #d2d2d2) border-box;
		transition: .3s ease-out
	}
	
	&:before, &:after {
		position: absolute;
		content: ''
	}
	
	&:before {
		box-sizing: border-box;
		top: calc(200% + #{.5*$line}); left: calc(50% - #{.5*$dosc});
		border: solid $ring transparent;
		width: $dosc; height: $dosc;
		@extend %osc;
		box-shadow: 0 0 0 $line #fff;
		background: inherit;
		filter: drop-shadow(1px 3px 2px rgba(#000, .32))
	}
	
	&:after {
		width: $wbar;
		top: calc(100% - #{$rad0}); left: calc(50% - #{$rad0});
		border: solid 0 transparent;
		border-width: $rad0 $rad0 - .5*$wbar;
		padding-top: 100%;
		background: 
			linear-gradient(#fff, #fff) padding-box, 
			radial-gradient(circle at 50% $rad0, 
					#fff calc(#{$rad0} - 1px), rgba(#fff, 0) $rad0) border-box, 
			radial-gradient(circle at 50% calc(100% - #{$rad0}), 
					#fff calc(#{$rad1} - 1px), rgba(#fff, 0) $rad1) border-box;
	}
}