Improve organizations grid layout

Author: thibaudgg

source/_index.slim

@@ -74,10 +74,10 @@ h3 id='organizations' class='mt-16 pt-8 mx-auto md:w-5/6 text-center tracking-ti
 p class='mt-2 mx-auto md:w-7/12 text-center md:leading-normal text-xl font-normal'
   = t("organizations.subtitle")
 
-div class='mt-10 mx-auto md:w-5/6 flex flex-wrap justify-evenly gap-6 md:gap-12'
+div class='mt-10 mx-auto md:w-5/6 grid grid-cols-3 md:grid-cols-6 gap-y-10'
   - data.organizations.each do |org, data|
     = link_to data.url, class: 'flex items-center no-underline', title: data.name
-      = image_tag "https://cdn.csa-admin.org/logos/#{org}", class: 'w-20 h-20 md:w-24 md:h-24 mx-auto', alt: "#{data.name} (logo)", title: data.name
+      = image_tag "https://cdn.csa-admin.org/logos/#{org}", class: 'size-16 md:size-24 mx-auto', alt: "#{data.name} (logo)", title: data.name
 
 
 h4 id='contact' class='mt-16 pt-8 mx-auto md:w-5/6 text-center text-xl md:text-3xl font-bold'

source/stylesheets/site.css

@@ -667,6 +667,15 @@ strong {
   display: flex;
 }
 
+.grid {
+  display: grid;
+}
+
+.size-16 {
+  width: 4rem;
+  height: 4rem;
+}
+
 .h-1 {
   height: 0.25rem;
 }
@@ -675,10 +684,6 @@ strong {
   height: 2.5rem;
 }
 
-.h-20 {
-  height: 5rem;
-}
-
 .h-5 {
   height: 1.25rem;
 }
@@ -691,10 +696,6 @@ strong {
   width: 2.5rem;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -715,6 +716,10 @@ strong {
   flex-grow: 1;
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -735,10 +740,6 @@ strong {
   justify-content: space-between;
 }
 
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
 .gap-2 {
   gap: 0.5rem;
 }
@@ -747,8 +748,8 @@ strong {
   gap: 1rem;
 }
 
-.gap-6 {
-  gap: 1.5rem;
+.gap-y-10 {
+  row-gap: 2.5rem;
 }
 
 .scroll-smooth {
@@ -1052,22 +1053,19 @@ strong {
     display: grid;
   }
 
-  .md\:h-12 {
-    height: 3rem;
+  .md\:size-24 {
+    width: 6rem;
+    height: 6rem;
   }
 
-  .md\:h-24 {
-    height: 6rem;
+  .md\:h-12 {
+    height: 3rem;
   }
 
   .md\:w-12 {
     width: 3rem;
   }
 
-  .md\:w-24 {
-    width: 6rem;
-  }
-
   .md\:w-4\/6 {
     width: 66.666667%;
   }
@@ -1093,6 +1091,10 @@ strong {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .md\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -1117,10 +1119,6 @@ strong {
     justify-content: center;
   }
 
-  .md\:gap-12 {
-    gap: 3rem;
-  }
-
   .md\:gap-6 {
     gap: 1.5rem;
   }