improve sponsors view with css grid

fixes #229

scipost_django/sponsors/templates/sponsors/_sponsor_card.html

-<div class="card text-center mb-2">
+<div class="card bg-light text-center mb-2 d-flex flex-column justify-content-end">
+
   {% if sponsor.logo %}
-    <img class="card-img-top {{ sponsor.css_class }} p-2" style="max-height: 16rem; max-width: 16rem;" src="{% if sponsor.logo %}{{ sponsor.logo.url }}{% endif %}" alt="{{ sponsor.name }} logo">
+    <img class="card-img-top bg-white p-2 my-auto {{ sponsor.css_class }}"
+         style="max-height: 16rem;
+                max-width: 100%;
+                object-fit: contain"
+         src="{{ sponsor.logo.url }}"
+         alt="{{ sponsor.name }} logo" />
   {% endif %}
-  <div class="card-body bg-light text-start">
-    <h4 class="card-title">
-      {% if sponsor.name_original %}{{ sponsor.name_original }}{% else %}{{ sponsor.name }}{% endif %}</h4>
-      {% if sponsor.name_original %}
-	<p class="card-text">({{ sponsor.name }})</p>
-      {% endif %}
-      <img src="{{ sponsor.country.flag }}" alt="{{ sponsor.country }} flag"/>&nbsp;<span class="text-muted"><small>[{{ sponsor.country }}]</small></span>&nbsp;&nbsp;{{ sponsor.get_country_display }}
-      &nbsp;&nbsp;<a href="{% url 'finances:subsidies' %}?org={{ sponsor.id }}">See subsidies</a>
+
+  <div class="p-2 text-start d-flex flex-column">
+
+    <h4>{% firstof sponsor.name_original sponsor.name %}</h4>
+
+    {% if sponsor.name_original %}<p class="card-text">({{ sponsor.name }})</p>{% endif %}
+
+    <div class="d-flex w-100 align-items-center">
+      <img width="16"
+           height="11"
+           src="{{ sponsor.country.flag }}"
+           alt="{{ sponsor.country }} flag" />
+      &nbsp;<span class="text-muted"><small>[{{ sponsor.country }}]</small></span>&nbsp;&nbsp;{{ sponsor.get_country_display }}
+      &nbsp;&nbsp;<a class="ms-auto"
+   href="{% url 'finances:subsidies' %}?org={{ sponsor.id }}">See subsidies</a>
+    </div>
   </div>
 </div>

scipost_django/sponsors/templates/sponsors/sponsors.html

@@ -87,38 +87,30 @@
       <h1 class="highlight">Our current Sponsors</h1>
 
       <h3 class="highlight">&euro;20k and above:</h3>
-      <div class="row">
+      <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
 	{% for sponsor in sponsors_20kplus %}
-	  <div class="col-md-6 col-lg-4 mb-2">
 	    {% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
-	  </div>
 	{% endfor %}
       </div>
 
       <h3 class="highlight">&euro;10k and above:</h3>
-      <div class="row">
+      <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
 	{% for sponsor in sponsors_10kplus %}
-	  <div class="col-md-6 col-lg-4 mb-2">
 	    {% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
-	  </div>
 	{% endfor %}
       </div>
 
       <h3 class="highlight">&euro;5k and above:</h3>
-      <div class="row">
+      <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
 	{% for sponsor in sponsors_5kplus %}
-	  <div class="col-md-6 col-lg-4 mb-2">
 	    {% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
-	  </div>
 	{% endfor %}
       </div>
 
       <h3 class="highlight">Our other current Sponsors:</h3>
-      <div class="row">
+      <div class="d-grid gap-3" style="grid-template-columns: repeat(3, minmax(0, 1fr));">
 	{% for sponsor in current_sponsors %}
-	  <div class="col-md-6 col-lg-4 mb-2">
 	    {% include 'sponsors/_sponsor_card.html' with sponsor=sponsor %}
-	  </div>
 	{% endfor %}
       </div>