Add videos to the website home page and features page

website/sass/base.scss

@@ -151,19 +151,6 @@ body > .page {
 					.heart.heart {
 						// The same color is also used below in the SVG after the `%23` (URL-encoded `#`)
 						color: #cc304f;
-
-						&::after {
-							content: "";
-							background-image: url('data:image/svg+xml;utf8,\
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,15C5.12471,9.753694 0.5,8.795225 0.5,4.736524 C0.5,-0.507473 7.468734,0 8,4.967381 C8.531266,0 15.5,-0.507473 15.5,4.736524 C15.5,8.795225 10.87529,9.753694 8,15z" fill="%23cc304f" /></svg>\
-								');
-							display: inline-block;
-							width: 0.75em;
-							height: 0.75em;
-							margin-left: 0.25em;
-							margin-bottom: -0.1em;
-							vertical-align: baseline;
-						}
 					}
 
 					@media screen and (max-width: 1200px) {
@@ -683,6 +670,19 @@ hr,
 	}
 }
 
+.heart::after {
+	content: "";
+	background-image: url('data:image/svg+xml;utf8,\
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,15C5.12471,9.753694 0.5,8.795225 0.5,4.736524 C0.5,-0.507473 7.468734,0 8,4.967381 C8.531266,0 15.5,-0.507473 15.5,4.736524 C15.5,8.795225 10.87529,9.753694 8,15z" fill="%23cc304f" /></svg>\
+		');
+	display: inline-block;
+	width: 0.75em;
+	height: 0.75em;
+	margin-left: 0.25em;
+	margin-bottom: -0.1em;
+	vertical-align: baseline;
+}
+
 // blockquote {
 // 	padding: 32px 80px;
 // 	background: rgba(0, 0, 0, 0.0625);

website/sass/page/features.scss

@@ -1,3 +1,13 @@
+.video-container {
+	background: var(--color-fog);
+
+	> div {
+		margin: calc(20 * var(--variable-px)) auto;
+		width: 100%;
+		max-width: 800px;
+	}
+}
+
 #roadmap {
 	width: 100%;
 	text-align: center;

website/sass/page/index.scss

@@ -18,24 +18,25 @@
 #tagline {
 	h1 {
 		span {
-		position: relative;
+			position: relative;
 
-		&::after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			left: 0;
-			right: 0;
-			top: 100%;
-			// Dimensions: 480x40
-			height: 100%;
-			margin-top: -0.2em;
-			background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
-			background-repeat: no-repeat;
-			background-size: contain;
+			&::after {
+				content: "";
+				pointer-events: none;
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 100%;
+				// Dimensions: 480x40
+				height: 100%;
+				margin-top: -0.2em;
+				background: url("https://static.graphite.rs/textures/text-sketch-underline.png");
+				background-repeat: no-repeat;
+				background-size: contain;
+			}
 		}
-	}}
-	
+	}
+
 	p {
 		font-size: 1.2rem;
 
@@ -112,15 +113,61 @@
 // ▛ OVERVIEW ▜
 #overview {
 	background-color: var(--color-cloud);
+
+	.sizzle-video {
+		display: flex;
+		flex-wrap: nowrap;
+		max-width: 100%;
+
+		.block {
+			min-width: 0;
+			flex-direction: row;
+
+			&.text {
+				flex: 1 4 100%;
+				flex-direction: column;
+
+				p:has(.button) {
+					margin-top: 20px;
+				}
+			}
+
+			&.video {
+				flex: 0 1 fit-content;
+			}
+		}
+
+		@media screen and (max-width: 900px) {
+			flex-wrap: wrap;
+
+			.block.video {
+				flex: 1 1 100%;
+				justify-content: center;
+			}
+		}
+
+		@media screen and (max-width: 1100px) {
+			p:has(.button) {
+				display: none;
+			}
+		}
+	}
 }
 // ▙ OVERVIEW ▟
 
+// ▛ DONATE ▜
+#donate {
+	h2 {
+		color: #cc304f;
+	}
+}
+// ▙ DONATE ▟
+
 // ▛ PROCEDURALISM ▜
 #proceduralism {
 	background-color: var(--color-slate);
 	color: white;
-	margin-top: 0;
-	
+
 	.diptych {
 		background: black;
 		color: var(--color-fog);
@@ -183,9 +230,6 @@
 }
 // ▙ PROCEDURALISM ▟
 
-// ▛ DONATE ▜
-// ▙ DONATE ▟
-
 // ▛ NEWSLETTER ▜
 #newsletter {
 	background-color: var(--color-peach);
@@ -355,7 +399,7 @@
 			margin: calc(20 * var(--variable-px)) auto;
 			width: 100%;
 			max-width: 800px;
-	
+
 			+ p {
 				margin-top: 0;
 			}
@@ -377,7 +421,7 @@
 // ▛ RECENT NEWS ▜
 #recent-news {
 	background-color: var(--color-parchment);
-	
+
 	.banner img {
 		width: 100%;
 		height: auto;