Style members area

assets/css/app.css

@@ -120,6 +120,10 @@ h1, h2, h3, h4, h5, h6 {
   background-color: var(--cotech-light-grey);
 }
 
+.slice-subtitle {
+  color: var(--cotech-light-grey);
+}
+
 .metadata {
   display: flex;
   gap: var(--space-xl);
@@ -143,3 +147,48 @@ h1, h2, h3, h4, h5, h6 {
   font-size: 2.2rem;
   letter-spacing: 0.02em;
 }
+
+.logo-grid {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+@media screen and (width >= 480px) {
+  .logo-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (width >= 720px) {
+  .logo-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media screen and (width >= 960px) {
+  .logo-grid {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.logo-grid_item {
+  width: 240px;
+  height: 120px;
+  border: 1px solid var(--cotech-light-grey);
+  padding: var(--space-sm);
+}
+
+.logo-grid_link {
+  width: 100%;
+}
+
+.logo-grid_img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: transform .2s;
+}
+
+.logo-grid_img:hover {
+  transform: scale(1.1);
+}

index.html

@@ -39,19 +39,20 @@ layout: home
   <p>If you’re a tech co-op or a co-operatively minded freelancer, <a href="/join">please join us</a>.
 </section>
 
-<section id="members">
+<section id="members" class="slice">
-  <h2>Members</h2>
+  <h2 class="slice_title">Members</h2>
-  <p>Take a look at who is part of the CoTech network</p>
+  <p class="slice_subtitle">Take a look at who is part of the CoTech network</p>
 
-  <ul>
+  <div class="logo-grid">
     {% for coop in site.coops %}
-    <li>
+    <a class="logo-grid_link" href="{{ coop.url | relative_url }}">
-      <a href="{{ coop.url | relative_url }}">{{ coop.name }}
+      <div class="logo-grid_item">
-        <img src="/images/coops/{{ coop.slug }}" alt="" />
+        <img class="logo-grid_img" src="/images/coops/{{ coop.slug }}" alt="{{ coop.name }}" />
-      </a>
+      </div>
-    </li>
+    </a>
     {% endfor %}
-  </ul>
+  </div>
+
 </section>
 
 <section>