Switched homepage in use section to use the new .logogrid class. Killed .companies

Author: palewire

_sass/_nav.scss

@@ -338,53 +338,6 @@ body {
     margin-bottom: 16px;
 }
 
-/* Companies section for only "Currently in use" (this section acts differently than customer logos in the "About" section of the site) */
-
-/*Section-center is used to center the companies on the home page & get rid of padding on left associated with ul*/
-.section-center {
-    text-align: center;
-}
-
-.companies {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-}
-
-.companies li {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block;
-    padding: 3%;
-    vertical-align: middle;
-    width: 18%;
-}
-
-.companies .col img {
-    display: block;
-    width: 100%;
-    max-height: 60px;
-}
-
-.greydout {
-    -webkit-transition: all .05s ease;
-    -moz-transition: all .05s ease;
-    -ms-transition: all .05s ease;
-    -o-transition: all .05s ease;
-    transition: all .05s ease;
-}
-
-.greydout:hover {
-    -webkit-opacity: 0.65;
-    -moz-opacity: 0.65;
-    opacity: 0.65;
-}
-
 /* JupyterHub section on front page */
 /* Feature-middle is for the JupyterHub features that are in the middle that need to be offset to sit on the track */
 .feature-middle {
@@ -603,9 +556,6 @@ body {
         font-size: 15pt;
         line-height: 25pt;
     }
-    .companies li {
-        width: 23%;
-    }
 }
 
 /* all elements in .containers that have a anchor 

_sass/components/_logogrid.scss

@@ -16,6 +16,9 @@ ul.logogrid {
         padding: 3%;
         vertical-align: middle;
         width: 23%;
+        &.small {
+            width: 18%;
+        }
         @media (max-width: 768px) {
             width: 30%;
             padding: 4%;
@@ -27,4 +30,16 @@ ul.logogrid {
             margin: 0;
         }
     }
+    .greydout {
+        -webkit-transition: all .05s ease;
+        -moz-transition: all .05s ease;
+        -ms-transition: all .05s ease;
+        -o-transition: all .05s ease;
+        transition: all .05s ease;
+    }
+    .greydout:hover {
+        -webkit-opacity: 0.65;
+        -moz-opacity: 0.65;
+        opacity: 0.65;
+    }
 }

index.html

@@ -401,9 +401,9 @@ <h4 class="nb-desc">
         <div class="container">
             <div class="row">
                 <h3 class="section-header">{{ page.in_use.headline }}</h3>
-                <ul class="companies">
+                <ul class="logogrid">
                 {% for li in page.in_use.companies %}
-                <li class="col">
+                <li class="small">
                     <a href="{{ li.href }}">
                         <img src="{{ li.src }}" class="greydout" alt="{{ li.alt }}" loading="lazy">
                     </a>