Fix sponsor logo/header overlap on sponsors page

Author: SergioChan

apps/sponsors/templates/sponsors/partials/sponsors-list.html

@@ -43,19 +43,19 @@ <h3 class="widget-title">Job Board Sponsors</h3>
 
   {% for package, placement_info in sponsorships_by_package.items %}
   {% if placement_info.sponsorships %}
-  <div title="{{ package }} Sponsors" align="center">
+  <div title="{{ package }} Sponsors" align="center" style="margin-bottom: 3rem;">
     {% with dimension=placement_info.logo_dimension %}
 
     <h1 style="font-size: {% if forloop.first %}350%{% else %}300%{% endif %}">{{ placement_info.label }} Sponsors</h1>
 
-    <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); grid-template-rows: repeat(1, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center;">
+    <div style="display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax({{ dimension }}px, 0fr)); align-items: center; justify-content: center; row-gap: 2.5rem;">
       {% for sponsorship in placement_info.sponsorships %}
         <div id="{{ sponsorship.sponsor.slug }}" data-internal-year={{ sponsorship.year }}>
             <div
                 data-ea-publisher="psf"
                 data-ea-type="psf-image-only"
                 data-ea-force-ad="{{ sponsorship.sponsor.slug }}-psf-sponsors"
-                style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;height:auto;width:auto;"
+                style="max-width:{{ sponsorship.sponsor.web_logo|ideal_size:dimension }}px;max-height:{{ dimension }}px;height:auto;width:auto;"
             ></div>
             <p>{{ sponsorship.sponsor.name }}</p>
         </div>