chore: add "MVP" to my titles (playfulprogramming#1219)

Author: crutchcorn

src/views/collections/framework-field-guide/components/your-guide-metrics.module.scss

@@ -6,6 +6,7 @@
 	gap: var(--section-gap);
 	margin: 0;
 	padding: 0;
+	padding-bottom: var(--spc-6x);
 	list-style-type: none;
 	grid-template-columns: repeat(3, 1fr);
 	grid-template-rows: repeat(2, 1fr);

src/views/collections/framework-field-guide/components/your-guide-text-container.astro

@@ -12,6 +12,12 @@ import YourGuideTextContainerBack from "./your-guide-text-container-back.astro";
 			class={`text-style-button ${styles.titleLink}`}
 			href="https://stars.github.com/profiles/crutchcorn/">GitHub Star</a
 		>
+		<span class={styles.titleDivider}>·</span>
+		<a
+			class={`text-style-button ${styles.titleLink}`}
+			href="https://mvp.microsoft.com/en-US/MVP/profile/0ab92fa3-8847-4304-8104-0cdfc5b79ed8"
+			>Microsoft MVP</a
+		>
 	</p>
 	<div class={styles.guideText}>
 		<div id="guide-text-front" class={styles.guideTextFront}>

src/views/collections/framework-field-guide/components/your-guide-text-container.module.scss

@@ -25,6 +25,9 @@
 	top: 0;
 	white-space: pre;
 	z-index: 1;
+	flex-wrap: wrap;
+	width: max-content;
+	max-width: 80vw;
 }
 
 .titleDivider {