From 46484998139057a23701aca771992c5c3021e38c Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Mon, 15 Dec 2025 13:17:39 +0000
Subject: [PATCH] Display co-op logos and services in a grid

---
 assets/css/app.css | 27 +++++++++++++-
 index.html         | 92 +++++++++++++++++++++++-----------------------
 2 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index e5d10f1..74a88d7 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -177,7 +177,6 @@ section {
   display: flex;
   justify-content: center;
 }
-}
 
 .stack {
   display: flex;
@@ -215,6 +214,32 @@ section {
   color: var(--cotech-white);
 }
 
+.grid {
+  display: grid;
+  grid-gap: var(--space-sm);
+  grid-template-columns: 1fr;
+  align-items: stretch;
+}
+
+.grid a {
+  display: flex;
+  height: 100%;
+}
+
+.grid-dense {
+  grid-template-columns: 1fr 1fr;
+}
+
+@media (min-width: 420px) {
+  .grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .grid-dense {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+}
+
 .header {
   display: flex;
   padding: var(--space-lg) var(--space-md);
diff --git a/index.html b/index.html
index 6449a31..0cea095 100644
--- a/index.html
+++ b/index.html
@@ -22,53 +22,55 @@ layout: default
   particularly when it comes to democratic ownership and
   decision-making.</p>
 
-  <div class="box stack">
-    <h3 class="title">Digital products & platforms</h3>
-    <ul>
-      <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
-      <li>CMS / CRM design and development</li>
-      <li>E-commerce</li>
-      <li>Complex data integrations</li>
-      <li>Learning platforms</li>
-      <li>Custom AI applications</li>
-      <li>Data visualisation</li>
-      <li>Cloud hosting</li>
-    </ul>
-  </div>
+  <div class="grid">
+    <div class="box stack">
+      <h3 class="title">Digital products & platforms</h3>
+      <ul>
+        <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
+        <li>CMS / CRM design and development</li>
+        <li>E-commerce</li>
+        <li>Complex data integrations</li>
+        <li>Learning platforms</li>
+        <li>Custom AI applications</li>
+        <li>Data visualisation</li>
+        <li>Cloud hosting</li>
+      </ul>
+    </div>
 
-  <div class="box stack">
-    <h3 class="title">Design & content</h3>
-    <ul>
-      <li>User research & testing</li>
-      <li>Design sprints & discovery</li>
-      <li>Accessibility & usability training</li>
-      <li>Branding & graphic design</li>
-      <li>Film & animation</li>
-      <li>Game design</li>
-      <li>Print production</li>
-    </ul>
-  </div>
+    <div class="box stack">
+      <h3 class="title">Design & content</h3>
+      <ul>
+        <li>User research & testing</li>
+        <li>Design sprints & discovery</li>
+        <li>Accessibility & usability training</li>
+        <li>Branding & graphic design</li>
+        <li>Film & animation</li>
+        <li>Game design</li>
+        <li>Print production</li>
+      </ul>
+    </div>
 
-  <div class="box stack">
-    <h3 class="title">Marketing & comms</h3>
-    <ul>
-      <li>Digital strategy & campaigns</li>
-      <li>Copywriting</li>
-      <li>Social media marketing</li>
-      <li>Search engine optimisation (SEO)</li>
-      <li>Generative engine optimisation (GEO)</li>
-      <li>Analytics & analysis</li>
-    </ul>
-  </div>
+    <div class="box stack">
+      <h3 class="title">Marketing & comms</h3>
+      <ul>
+        <li>Digital strategy & campaigns</li>
+        <li>Copywriting</li>
+        <li>Social media marketing</li>
+        <li>Search engine optimisation (SEO)</li>
+        <li>Generative engine optimisation (GEO)</li>
+        <li>Analytics & analysis</li>
+      </ul>
+    </div>
 
-  <div class="box stack">
-    <h3 class="title">Coop & organisational development</h3>
-    <ul>
-      <li>Cooperative Development</li>
-      <li>Facilitation</li>
-      <li>Sociocracy Training</li>
-      <li>Service Design</li>
-    </ul>
+    <div class="box stack">
+      <h3 class="title">Coop & organisational development</h3>
+      <ul>
+        <li>Cooperative Development</li>
+        <li>Facilitation</li>
+        <li>Sociocracy Training</li>
+        <li>Service Design</li>
+      </ul>
+    </div>
   </div>
 </section>
 
@@ -76,7 +78,7 @@ layout: default
   <h2>Our members</h2>
   <p class="intro">Meet the coops behind CoTech</p>
 
-  <div>
+  <div class="grid grid-dense">
     {% for coop in site.coops %}
     <a href="{{ coop.url | relative_url }}">
       <div class="box">