Display co-op logos and services in a grid

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);

index.html

@@ -22,6 +22,7 @@ layout: default
   particularly when it comes to democratic ownership and
   decision-making.</p>
 
+  <div class="grid">
     <div class="box stack">
       <h3 class="title">Digital products & platforms</h3>
       <ul>
@@ -70,13 +71,14 @@ layout: default
         <li>Service Design</li>
       </ul>
     </div>
+  </div>
 </section>
 
 <section id="members" class="stack">
   <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">