Seahawk infographic and begin removing bulma column styling

Author: steph1111

_includes/project-gallery-card.html

@@ -1,7 +1,7 @@
 <div id="project-gallery-card">
-    <div class="columns is-centered is-multiline is-mobile">
+    <div class="grid" id="project-grid">
         {% for image in page.gallery %}
-            <div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch">
+        <div class="column" id="project-card">
                 <div class="card"
                     data-image="{{image.image}}" 
                     data-text="{{ image.text }}" 

_includes/robot-card.html

@@ -1,14 +1,13 @@
-<div class="columns is-centered is-multiline is-mobile">
+<div class="grid" id="robot-grid">
     {% for robot in site.data.robots %}
-        <div class="column has-text-centered m-2 is-one-third-widescreen is-one-third-desktop is-one-fifth-fullhd is-one-third-tablet is-two-fifths-mobile is-three-quarters-touch"
-            id="robot-card">
-            <a href="{{site.url}}{{site.baseurl}}/{{robot.page}}" class="robot-link">
-                <figure class="image is-5by4" style="background-image: url({{robot.image}});"></figure>
-                <div class="overlay">
-                    <h2 class="has-text-weight-bold is-size-3">{{ robot.year }}</h2>
-                    <p class="has-text-white-ter has-text-weight-normal">{{ robot.name }}</p>
-                </div>
-            </a>
-        </div>
+    <div class="column" id="robot-card">
+        <a href="{{site.url}}{{site.baseurl}}/{{robot.page}}" class="robot-link">
+            <figure class="image is-5by4" style="background-image: url({{robot.image}});"></figure>
+            <div class="overlay">
+                <h2 class="has-text-weight-bold is-size-3">{{ robot.year }}</h2>
+                <p class="has-text-white-ter has-text-weight-normal">{{ robot.name }}</p>
+            </div>
+        </a>
+    </div>
     {% endfor %}
 </div>

_sass/main.scss

@@ -72,11 +72,6 @@ hr {
     height: 1px;
 }
 
-.column {
-    margin: auto 0.5rem;
-    padding: 0.5rem;
-}
-
 .searchResult {
     a {
         .title {

_site/assets/css/style.css

@@ -163,9 +163,10 @@ body { background-color: var(--background); }
 }
 
 #project-gallery-card {
-    margin-top: 20px;
-    .columns .column {
-        margin-bottom: 20px;
+    #project-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        justify-content: center;
     }
 
     .card {
@@ -451,9 +452,13 @@ body { background-color: var(--background); }
     }
 }
 
-#robots {
+#robot-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     #robot-card {
         position: relative;
+        display: flex;
+        flex-direction: column;
         .image {
             position: relative;
             background-size: cover;