Sponsor page dynamic sizing

Author: steph1111

_includes/about.html

@@ -1,7 +1,7 @@
 <section class="section has-text-justified has-background-black-bis" id="about">
     <div class="container">
         <h2 class="title has-text-left has-text-white-ter is-size-2 has-text-weight-bold mgb-medium">
-            Hi
+            About Us
         </h2>
         <p>
             We are the Cabrillo Robotics Club (CRC), a student-led organization based at Cabrillo College in Aptos,

_layouts/sponsors.html

@@ -19,8 +19,9 @@ <h1 class="title has-text-left is-size-1 has-text-weight-bold mgb-medium">
                 </h1>
                 <p class="description">
                     Cabrillo Robotics Club depends on the generous support of our sponsors to continue our work in
-            creating and improving robotic technology. We give our sincerest gratitude to the organizations who have
-            supported us.
+                    creating and improving robotic technology. We give our sincerest gratitude to the organizations who
+                    have
+                    supported us.
                 </p>
             </div>
 
@@ -30,12 +31,16 @@ <h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium" style=
                 </h2>
             </div>
 
-            <div class="sponsor-thing">
+            <div class="sponsor-grid">
                 {% for sponsor in site.data.sponsors %}
                 {% if sponsor.level == "lazer" %}
-                <a href="{{sponsor.website}}">
-                    <img src="{{sponsor.logo}}" alt="{{sponsor.name}}" style="width:25%">
-                </a>    
+                <div class="column">
+                    <div class="sponsor-card">
+                        <a href="{{sponsor.website}}">
+                            <img src="{{sponsor.logo}}" alt="{{sponsor.name}}">
+                        </a>
+                    </div>
+                </div>
                 {% endif %}
                 {% endfor %}
             </div>
@@ -46,12 +51,16 @@ <h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium" style=
                 </h2>
             </div>
 
-            <div class="sponsor-thing">
+            <div class="sponsor-grid">
                 {% for sponsor in site.data.sponsors %}
                 {% if sponsor.level == "diamond" %}
-                <a href="{{sponsor.website}}">
-                    <img src="{{sponsor.logo}}" alt="{{sponsor.name}}" style="width:25%">
-                </a>    
+                <div class="column">
+                    <div class="sponsor-card">
+                        <a href="{{sponsor.website}}">
+                            <img src="{{sponsor.logo}}" alt="{{sponsor.name}}">
+                        </a>
+                    </div>
+                </div>
                 {% endif %}
                 {% endfor %}
             </div>
@@ -62,12 +71,16 @@ <h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium" style=
                 </h2>
             </div>
 
-            <div class="sponsor-thing">
+            <div class="sponsor-grid">
                 {% for sponsor in site.data.sponsors %}
                 {% if sponsor.level == "gold" %}
-                <a href="{{sponsor.website}}">
-                    <img src="{{sponsor.logo}}" alt="{{sponsor.name}}" style="width:25%">
-                </a>    
+                <div class="column">
+                    <div class="sponsor-card">
+                        <a href="{{sponsor.website}}">
+                            <img src="{{sponsor.logo}}" alt="{{sponsor.name}}">
+                        </a>
+                    </div>
+                </div>
                 {% endif %}
                 {% endfor %}
             </div>
@@ -78,15 +91,20 @@ <h2 class="title has-text-left is-size-2 has-text-weight-bold mgb-medium" style=
                 </h2>
             </div>
 
-            <div class="sponsor-thing">
+            <div class="sponsor-grid">
                 {% for sponsor in site.data.sponsors %}
                 {% if sponsor.level == "silver" %}
-                <a href="{{sponsor.website}}">
-                    <img src="{{sponsor.logo}}" alt="{{sponsor.name}}" style="width:25%">
-                </a>    
+                <div class="column">
+                    <div class="sponsor-card">
+                        <a href="{{sponsor.website}}">
+                            <img src="{{sponsor.logo}}" alt="{{sponsor.name}}">
+                        </a>
+                    </div>
+                </div>
                 {% endif %}
                 {% endfor %}
             </div>
+
             <p class="your-name-here">
                 Want your name here?
             </p>

assets/css/style.scss

@@ -1436,13 +1436,16 @@ br { margin-bottom: 20px; }
 }
 
 #sponsors {
-    #sponsor-thing {
-        display: flex;
+    .sponsor-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
         align-items: center;
-        .img {
-            display: block;
-            float: left;
-        }
+    }
+    .sponsor-card {
+        transition: all 0.25s ease;
+    }
+    .sponsor-card:hover {
+        transform: scale(1.01);
     }
     .description {
         text-align: justify;