<main> <!-- near: 24px, away: 32px -->
	<section data-density-shift> <!-- near: 16px, away: 24px -->

		<header data-density-shift> <!-- near: 8px, away: 16px -->
			<h4>VIDEO</h4>
			<h2>Supernova</h2>
		</header>
		
		<p>An astronomical event that occurs during the last stages of a massive star's life</p>

		<ul data-density-shift> <!-- near: 8px, away:  16px -->
			<li>Galaxies</li>
			<li>Milky Way</li>
			<li>Speed of Light</li>
		</ul>

		<div data-density-shift> <!-- near: 8px, away: 16px -->
			<button>View</button>
		</div>
		
	</section>
</main>
$attr-sel: "[data-density-shift]";
$levels: 4;

@function fib($n) {
	@return if($n <= 1, 1, fib($n - 1) + fib($n - 2));
}

@mixin vars($n) {
	--spacing--away: calc(
		#{fib($n + 1)} * var(--density, 0.5rem)
	);
	
	--spacing--near: calc(
		#{fib($n)} * var(--density, 0.5rem)
	);
}


@for $i from 1 through $levels {
	$nest-sel: if($i == 1, "body", selector-nest($nest-sel, $attr-sel));

	#{$nest-sel} {
		@include vars($levels - $i);
	}
}

/*  =================== */

* {
	box-sizing: border-box;
	margin: 0;
	line-height: 1;
}

body {
	background: #ccc;
	font-family: sans-serif;
}

main {
	padding: var(--spacing--away);
}

section {
	max-width: 300px;
	background: white;
	padding: var(--spacing--away);
}

header,
section {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--spacing--near);
}

ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing--near);
}

li {
	background: #eee;
	padding: var(--spacing--near);
	font-size: .8em;
}

button {
	cursor: pointer;
	padding: var(--spacing--near) var(--spacing--away);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.