grid works now

assets/scss/custom.scss

@@ -50,4 +50,15 @@
   .time {
     text-align: right;
   }
-  
+  
+
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+  }
+
+  .grid-item {
+
+    padding: 20px;
+  }

hugo_stats.json

@@ -34,6 +34,7 @@
       "section",
       "source",
       "span",
+      "style",
       "svg",
       "textarea",
       "time",
@@ -64,6 +65,7 @@
       "btn-sm",
       "capitalize",
       "col-12",
+      "col-md-3",
       "col-md-4",
       "column",
       "container",
@@ -92,6 +94,7 @@
       "from-body",
       "g",
       "grid-container",
+      "grid-item",
       "group",
       "gx-5",
       "h-4",
@@ -223,7 +226,6 @@
       "search-wrapper-footer",
       "search-wrapper-header",
       "section",
-      "section-s",
       "section-sm",
       "sm:bg-red-200",
       "sm:block",

layouts/index.html

@@ -80,24 +80,32 @@
 {{ end }}
 <!-- /Features -->
 
-<!-- features2-->
-{{ range $i, $e:= .Params.features2 }}
 
-  <div class="container">
 
-      <div>
-        <h2 class="mb-4">{{ .title | markdownify }}</h2>
-        <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
-      </div>
 
+<!-- features2test-->
+
+
+<div class="container">
+  <div class="grid-container">
+    {{ range $i, $e := .Params.features2 }}
+    <div class="grid-item">
+      <h2 class="mb-4">{{ .title | markdownify }}</h2>
+      <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
+      {{ with .button }} {{ if .enable }}
+      <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
+        {{ .label }}
+        <i class="fa fa-arrow-right pl-2"></i>
+      </a>
+      {{ end }} {{ end }}
+    </div>
+    {{ end }}
   </div>
-
+</div>
-{{ end }}
-<!--/features2-->
-
 
 
 
+<!-- features2test-->
 
 {{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
 <section>

public/css/style.css

@@ -3061,6 +3061,14 @@ input#nav-toggle:checked ~ #nav-menu {
 .time {
   text-align: right; }
 
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px; }
+
+.grid-item {
+  padding: 20px; }
+
 @media (min-width: 540px) {
 
   .sm\:col-10 {

public/index.html

@@ -2080,39 +2080,47 @@
 
 
 
-  <div class="container">
 
-      <div>
-        <h2 class="mb-4">Fediversity explained - for Individuals</h2>
-        <p class="mb-8 text-lg">2Always be in control with your own data on social networks, whether that&rsquo;s with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible.</p>
-      </div>
 
+
+<div class="container">
+  <div class="grid-container">
+    
+    <div class="grid-item">
+      <h2 class="mb-4">Fediversity explained - for Individuals</h2>
+      <p class="mb-8 text-lg">2Always be in control with your own data on social networks, whether that&rsquo;s with Mastodon, PeerTube or Pixelfed: Fediversity makes it possible.</p>
+       
+      <a class="btn btn-primary mt-6" href="//localhost:1313/individuals">
+        Learn more
+        <i class="fa fa-arrow-right pl-2"></i>
+      </a>
+       
+    </div>
+    
+    <div class="grid-item">
+      <h2 class="mb-4">Fediversity explained - for Developers</h2>
+      <p class="mb-8 text-lg">2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help.</p>
+       
+      <a class="btn btn-primary mt-6" href="//localhost:1313/developers">
+        Learn more
+        <i class="fa fa-arrow-right pl-2"></i>
+      </a>
+       
+    </div>
+    
+    <div class="grid-item">
+      <h2 class="mb-4">Fediversity explained - for the EC</h2>
+      <p class="mb-8 text-lg">2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project.</p>
+       
+      <a class="btn btn-primary mt-6" href="//localhost:1313/ec">
+        Learn more
+        <i class="fa fa-arrow-right pl-2"></i>
+      </a>
+       
+    </div>
+    
   </div>
-
+</div>
-
-
-  <div class="container">
-
-      <div>
-        <h2 class="mb-4">Fediversity explained - for Developers</h2>
-        <p class="mb-8 text-lg">2As a developer building the next generation of social platforms, you are looking to make it easier to facilitate your customers to use your product. Fediversity can help.</p>
-      </div>
-
-  </div>
-
-
-
-  <div class="container">
-
-      <div>
-        <h2 class="mb-4">Fediversity explained - for the EC</h2>
-        <p class="mb-8 text-lg">2The Fediversity Project operates on a grant gratiously provided by the HORIZON fund by the EC. Learn more about the accountability of the project.</p>
-      </div>
-
-  </div>
-
-
-
 
 
 

resources/_gen/assets/css/style.css_82b067fd6c564693170dff5ae4660239.content

@@ -3061,6 +3061,14 @@ input#nav-toggle:checked ~ #nav-menu {
 .time {
   text-align: right; }
 
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px; }
+
+.grid-item {
+  padding: 20px; }
+
 @media (min-width: 540px) {
 
   .sm\:col-10 {

resources/_gen/assets/scss/main.scss_f120a3f402b106f64b18d498afd3d82e.content

@@ -1052,3 +1052,11 @@
 
 .time {
   text-align: right; }
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px; }
+
+.grid-item {
+  padding: 20px; }