diff --git a/_includes/layouts/services/social.njk b/_includes/layouts/services/social.njk
index e2cbbc5..6c9706d 100644
--- a/_includes/layouts/services/social.njk
+++ b/_includes/layouts/services/social.njk
@@ -1,3 +1,8 @@
+<h2>Social</h2>
+<card-container horizontal>
+
+</card-container>
+
 <details id="social" class="styled">
     <summary><span class="icon tabler--universe"></span> Social <span class="icon tabler--arrow-autofit-height"></span></summary>
     <section>
diff --git a/_includes/styles/base.css b/_includes/styles/base.css
index 9de45ee..b2cdc1c 100644
--- a/_includes/styles/base.css
+++ b/_includes/styles/base.css
@@ -318,6 +318,19 @@ details.cw[open] {
 }
 
 /* card styling */
+card-container {
+    display: flex;
+    gap: .5rem;
+
+    .card {
+        background-color: ;
+    }
+
+    &[horizontal] {
+        flex-flow: row wrap;
+    }
+}
+
 .card {
     background-color: color-mix(in srgb, var(--background) 95%, white);
     border-radius: 1rem;