Improve badge wrapper

src/_includes/main/badges.njk

@@ -3,11 +3,11 @@
     <div class="widgets home__badges">
         <a href="https://validator.w3.org/feed/check.cgi?url=https%3A//helenchong.dev/blog/feed.xml"><img src="/assets/icons/badges/valid-atom.png" alt="Valid Atom 1.0" width="88" height="31" loading="lazy"></a>
         <a href="https://ko-fi.com/s/798b83fbcc"><img src="/assets/icons/badges/coffee-powered.png" alt="Coffee powered" width="88" height="31" loading="lazy"></a>
-        <div id="wcb" class="carbonbadge">
-            <noscript>
-                <p>Looks like you have JavaScript disabled. JavaScript is required to display the <a href="https://www.websitecarbon.com/badge/">Website Carbon badge</a>.</p>
-            </noscript>
-        </div>
+    </div>
+    <div id="wcb" class="carbonbadge">
+        <noscript>
+            <p>Looks like you have JavaScript disabled. JavaScript is required to display the <a href="https://www.websitecarbon.com/badge/">Website Carbon badge</a>.</p>
+        </noscript>
     </div>
     <script src="https://unpkg.com/[email protected]/b.min.js" defer></script>
 </section>

src/assets/css/home.css

@@ -114,6 +114,10 @@
     gap: 2em;
     margin-top: 1.5em;
 }
-
 .webrings h3 { font-size: 1.5rem; }
-.home__badges { gap: 0.5em; }
+
+.home__badges {
+    --badge-gap: 0.5em;
+    gap: var(--badge-gap);
+    margin-bottom: var(--badge-gap);
+}