Make all workshop categories display in one row on large screens

- Change column classes to col-xl col-lg-4 col-md-6 col-sm-6
- Add category-row class for targeting specific CSS
- Add CSS media query for 5-column layout on XL screens (≥1200px)
- Maintains responsive behavior for smaller screens

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: tomvannuenen

index.html

@@ -29,7 +29,7 @@ <h4 class="alert-heading">
   </div>
   {% endif %}
 
-  <div class="row justify-content-center mb-4">
+  <div class="row justify-content-center mb-4 category-row">
     {% assign python_count = 0 %}
     {% assign r_count = 0 %}
     {% assign ai_count = 0 %}
@@ -93,7 +93,7 @@ <h4 class="alert-heading">
       {% endif %}
     {% endfor %}
 
-    <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
+    <div class="col-xl col-lg-4 col-md-6 col-sm-6 mb-3">
       <div class="card h-100 text-center border-0 shadow-sm category-card">
         <div class="card-body d-flex flex-column">
           <div class="category-icon python-icon"></div>
@@ -105,7 +105,7 @@ <h5 class="card-title text-dark">Python</h5>
       </div>
     </div>
 
-    <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
+    <div class="col-xl col-lg-4 col-md-6 col-sm-6 mb-3">
       <div class="card h-100 text-center border-0 shadow-sm category-card">
         <div class="card-body d-flex flex-column">
           <div class="category-icon r-icon"></div>
@@ -117,7 +117,7 @@ <h5 class="card-title text-dark">R</h5>
       </div>
     </div>
 
-    <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
+    <div class="col-xl col-lg-4 col-md-6 col-sm-6 mb-3">
       <div class="card h-100 text-center border-0 shadow-sm category-card">
         <div class="card-body d-flex flex-column">
           <div class="category-icon ai-icon"></div>
@@ -129,7 +129,7 @@ <h5 class="card-title text-dark">AI</h5>
       </div>
     </div>
 
-    <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
+    <div class="col-xl col-lg-4 col-md-6 col-sm-6 mb-3">
       <div class="card h-100 text-center border-0 shadow-sm category-card">
         <div class="card-body d-flex flex-column">
           <div class="category-icon qualitative-icon"></div>
@@ -141,7 +141,7 @@ <h5 class="card-title text-dark">Qualitative</h5>
       </div>
     </div>
 
-    <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
+    <div class="col-xl col-lg-4 col-md-6 col-sm-6 mb-3">
       <div class="card h-100 text-center border-0 shadow-sm category-card">
         <div class="card-body d-flex flex-column">
           <div class="category-icon other-icon"></div>

static/stylesheets/custom-home.css

@@ -104,6 +104,14 @@
   border-bottom: 1px solid #e9ecef;
 }
 
+/* Five column layout for categories on xl screens */
+@media (min-width: 1200px) {
+  .category-row .col-xl {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .workshop-links .btn {