diff --git a/_includes/components/image-list.html b/_includes/components/image-list.html
index 85cbe3b9..9bee5d00 100644
--- a/_includes/components/image-list.html
+++ b/_includes/components/image-list.html
@@ -1,8 +1,10 @@
 <div class="image-list">
   {% for item in include.items %}
-    {% include elements/hex-icon.html file=item.image %}
-    <div class="small">
-      {{ item.description }}
+    <div class="item">
+      {% include elements/hex-icon.html file=item.image %}
+      <div class="small">
+        {{ item.description }}
+      </div>
     </div>
   {% endfor %}
 </div>
diff --git a/_sass/components/_image-list.scss b/_sass/components/_image-list.scss
index 94d0f164..7904bb7a 100644
--- a/_sass/components/_image-list.scss
+++ b/_sass/components/_image-list.scss
@@ -1,25 +1,14 @@
 .image-list {
   display: grid;
-  grid-template-columns: repeat(1, min-content 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
   align-items: center;
-  row-gap: 20px;
+  row-gap: var(--block-flow-sm);
+  column-gap: var(--padding-md);
 
-  .small {
-    font-size: 85%;
-    margin-right: var(--padding-lg);
-  }
-}
-
-@media (min-width: 35em) {
-  .image-list {
-    row-gap: 40px;
-    grid-template-columns: repeat(2, min-content 1fr);
-  }
-}
-
-@media (min-width: 55em) {
-  .image-list {
-    row-gap: 60px;
-    grid-template-columns: repeat(3, min-content 1fr);
+  > .item {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    align-items: center;
+    column-gap: var(--padding-xs);
   }
 }
diff --git a/_sass/elements/_hex-icon.scss b/_sass/elements/_hex-icon.scss
index 260ec546..63492803 100644
--- a/_sass/elements/_hex-icon.scss
+++ b/_sass/elements/_hex-icon.scss
@@ -8,7 +8,6 @@
   width: calc(var(--icon-height) * var(--sin-60));
   height: var(--icon-height);
   display: inline-block;
-  margin-right: 12px;
   position: relative;
 
   filter: drop-shadow(0 0 2px rgba(0,0,0,0.1))