Use grid instead of equalizer in recommendations

It's August 2025 and support for grid layout has been available in about
99% of the browsers for some time now. All major browsers added support
for grid layouts in 2017, which means our rule to support browsers that
are 7 years old allows us to start using `display: grid`.

Using a grid layout allows displaying a dynamic number of rows while
keepin all of them the same height, the same foundation's equalizer
does, by setting `grid-auto-rows: 1fr`.

And the `grid-template-columns` property lets us use dynamic columns for
all screen sizes, always filling the available space. No need to use
breakpoints.

app/assets/stylesheets/shared/recommended_index.scss

@@ -17,10 +17,24 @@
   }
 
   ul {
+    display: grid;
     font-weight: bold;
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
     list-style: none;
     margin: 0;
 
+    @include breakpoint(medium) {
+      + * {
+        text-align: $global-right;
+      }
+    }
+
+    > li,
+    + * {
+      @include grid-column-gutter;
+    }
+
     > li {
       margin-bottom: calc($line-height / 4);
     }
@@ -52,9 +66,13 @@
     line-height: inherit;
     position: absolute;
     right: 12px;
-    top: -18px;
+    top: 0;
     z-index: 2;
 
+    @include breakpoint(medium) {
+      top: -18px;
+    }
+
     &:focus,
     &:hover {
       @include anchor-color-hover;

app/components/shared/recommended_index_component.html.erb

@@ -1,8 +1,5 @@
 <div class="recommended-index">
-  <div class="row relative" data-equalizer data-equalizer-on="medium">
-    <div class="small-12 column">
   <h2 class="show-for-sr"><%= t("shared.recommended_index.title") %></h2>
-    </div>
 
   <div id="recommendations" data-toggler=".hide">
     <%= button_to disable_recommendations_path, title: t("shared.recommended_index.hide"),
@@ -18,17 +15,16 @@
 
     <ul>
       <% recommendations.each do |recommendation| %>
-          <li class="small-12 medium-6 large-4 column end">
-            <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation", "data-equalizer-watch": true %>
+        <li>
+          <%= link_to recommendation.title, polymorphic_path(recommendation), class: "recommendation" %>
         </li>
       <% end %>
     </ul>
 
-      <div class="small-12 column">
+    <div>
       <%= link_to t("shared.recommended_index.see_more"),
                   current_path_with_query_params(order: "recommendations"),
-                    class: "float-right-medium small" %>
-      </div>
+                  class: "small" %>
     </div>
   </div>
 </div>