Two columns

content/stylesheets/main.css

@@ -421,6 +421,8 @@ fieldset p label input {
 }
 
 .link {
+  color: inherit;
+  text-decoration: none;
   display: grid;
   grid-template-columns: minmax(min-content, 25%) 80%;
 
@@ -431,10 +433,18 @@ fieldset p label input {
   transition: 0.3s;
   transition-property: box-shadow;
 
-  margin: 30px auto;
-
   gap: 20px;
   padding: 0.5rem;
+  max-width: 50%;
+  flex-grow: 1;
+}
+
+.fancy_link_container {
+  display: flex;
+  margin: auto;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
 }
 
 .link:hover {

layouts/partials/pretty_link.erb

@@ -1,4 +1,4 @@
-<div class="link" onclick="window.location.href = '<%= item.path %>'">
+<a class="link" href="<%= item.path %>">
     <div class="link__img">
         <img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=small" alt="<%= item[:naam] %>">
     </div>
@@ -10,4 +10,4 @@
             <%= text_segment(item.compiled_content) %>
         </p>
     </div>
-</div>
+</a>

layouts/thema.erb

@@ -3,7 +3,9 @@
   <div class="details-container details-text">
     <%= yield %>
   </div>
-  <% verenigingen_voor_thema(item[:naam]).each do |ver| %>
+  <div class="fancy_link_container">
-    <%= render '/partials/pretty_link.*', :item => ver %>
+    <% verenigingen_voor_thema(item[:naam]).each do |ver| %>
-  <% end %>
+      <%= render '/partials/pretty_link.*', :item => ver %>
+    <% end %>
+  </div>
 </div>