Using flexbox instead of grid for homepage logos (#280)

Closes #278

Author: mrego

_includes/sponsorship.html

@@ -107,19 +107,34 @@ <h3 class="center-text">Bronze Sponsors</h3>
 
 .logos-home {
   list-style: none;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: auto;
+  display: flex;
+  flex-wrap: wrap;
   padding: 0;
   max-width: 64rem;
   align-items: center;
+  justify-content: center;
 }
 
 .partner-img, .sponsor-img {
   min-width: 15rem;
   padding: 3.25rem 2rem;
 }
 
+.logos-home > li {
+  flex: 0 0 50%;
+}
+
+@media (max-width: 720px) {
+  .partner-img, .sponsor-img {
+    min-width: 9rem;
+    padding: 2rem 1rem;
+  }
+
+  .logos-home > li {
+    flex: 0 0 90%;
+  }
+}
+
 .inner-container__logos {
   border: 1px solid var(--midturquoise);
   max-width: 800px;
@@ -136,28 +151,4 @@ <h3 class="center-text">Bronze Sponsors</h3>
   font-size: var(--step-1);
 }
 
-.logos-home > li:nth-last-child(1):nth-child(odd) {
-  grid-column: 1 / -1;
-}
-
-.logos-home > li:nth-last-child(1):nth-child(odd) .sponsor-img {
-  padding: 1.25rem 0;
-  max-width: 8rem;
-  margin: 0 auto;
-}
-
-@media (max-width: 720px) {
-  .partner-img, .sponsor-img {
-    min-width: 9rem;
-    padding: 2rem 1rem;
-}
-}
-
-@media (max-width: 420px) {
-  .logos-home {
-    grid-template-columns: 1fr;
-  }
-}
-
-
 </style>