Wrap logos and services in a box

assets/css/app.css

@@ -32,6 +32,7 @@
   --cotech-white: white;
   --cotech-black: #000000;
   --cotech-light-grey: #646464;
+  --cotech-dark-grey: #222222;
   --cotech-blue: #2DA9D7;
 }
 
@@ -164,6 +165,13 @@ section {
   padding: var(--space-sm);
 }
 
+.box {
+  background: linear-gradient(180deg, rgba(45, 169, 215, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+  border: 1px solid var(--cotech-dark-grey);
+  border-radius: var(--space-sm);
+  padding: var(--space-sm);
+}
+
 .header {
   display: flex;
   padding: var(--space-lg) var(--space-md);

index.html

@@ -22,7 +22,7 @@ layout: default
   particularly when it comes to democratic ownership and
   decision-making.</p>
 
-  <div>
+  <div class="box">
     <h3 class="title">Digital products & platforms</h3>
     <ul>
       <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
@@ -36,7 +36,7 @@ layout: default
     </ul>
   </div>
 
-  <div>
+  <div class="box">
     <h3 class="title">Design & content</h3>
     <ul>
       <li>User research & testing</li>
@@ -49,7 +49,7 @@ layout: default
     </ul>
   </div>
 
-  <div>
+  <div class="box">
     <h3 class="title">Marketing & comms</h3>
     <ul>
       <li>Digital strategy & campaigns</li>
@@ -61,7 +61,7 @@ layout: default
     </ul>
   </div>
 
-  <div>
+  <div class="box">
     <h3 class="title">Coop & organisational development</h3>
     <ul>
       <li>Cooperative Development</li>
@@ -79,7 +79,7 @@ layout: default
   <div>
     {% for coop in site.coops %}
     <a href="{{ coop.url | relative_url }}">
-      <div>
+      <div class="box">
         <img class="greyscale" src="/images/coops/{{ coop.logo }}" alt="{{ coop.name }}" />
       </div>
     </a>