Update the website layout with narrower default width and better typography (#1753)

- Reduces the default width from 1600px to 1200px of the web page and reduce the size of various elements and text. This fixes the problem that I designed the website assuming everyone is viewing from the same 2560px wide screen as I used to design it, which is a bad assumption. Most websites are around the 1200px mark.
- Removes the use of the EB Garamond font, replacing more headers with a bold Inter instead, leaving only Bona Nova for h1 headers at the tops of pages (except the home page, which might have further revamp soon).
- Adds nice flavor graphics to a redesigned volunteer page.
- Cleans up and organizes the Zola templating code and CSS style sheets.
- Improves image carousel to fade out images when dragged past the start or end.

website/sass/about.scss

@@ -16,31 +16,32 @@
 	background-color: var(--color-parchment);
 	background-blend-mode: color-burn;
 
-	h2,
-	h2 + p,
-	h3,
-	h3 + p {
-		width: 100%;
+	h2 {
+		font-weight: 700;
 		text-align: center;
+		width: 100%;
 	}
 
 	h2 + p {
+		text-align: center;
+		width: 100%;
 		margin-top: 4px;
 		opacity: 0.75;
 	}
 
-	h3 + p {
-		margin-top: 0;
+	h2 + p + p {
+		text-align: center;
 	}
 
-	h2 .flag {
+	.flag {
 		font-family: "Noto Color Emoji", sans-serif;
-		font-size: 0.8em;
-		margin-left: 0.2em;
+		vertical-align: middle;
+		font-size: 1.5em;
+		margin-left: 0.25em;
 		cursor: default;
 	}
 
-	.section {
+	.block {
 		align-items: center;
 	}