From 0dd73bedde2ea1d568363d0d04a5de9419cf27be Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 26 Mar 2025 14:00:40 +0100
Subject: [PATCH] fix card logo size on homepage

---
 hub/services/static/css/servala-main.css   | 10 +++++++++-
 hub/services/templates/pages/homepage.html |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/hub/services/static/css/servala-main.css b/hub/services/static/css/servala-main.css
index e5e2c66..9d99d26 100644
--- a/hub/services/static/css/servala-main.css
+++ b/hub/services/static/css/servala-main.css
@@ -12083,7 +12083,6 @@ a.btn:focus {
 }
 
 .card__image__wide {
-    width: 150px;
     height: 80px;
     margin-bottom: 16px
 }
@@ -12109,6 +12108,15 @@ a.btn:focus {
     margin-bottom: 0
 }
 
+.card-logo {
+    max-height: 80px;
+    max-width: 100%;
+    width: auto;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+}
+
 @media (min-width: 992px) {
     .section-hero__header {
         width: 56%
diff --git a/hub/services/templates/pages/homepage.html b/hub/services/templates/pages/homepage.html
index ac0f25c..96f96e8 100644
--- a/hub/services/templates/pages/homepage.html
+++ b/hub/services/templates/pages/homepage.html
@@ -43,7 +43,7 @@
             <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
             <div class="card h-100 d-flex flex-column">
               <div class="card__image">
-                <a href="{{ service.get_absolute_url }}"><img class="img-fluid" src="{{ service.logo.url }}" alt="{{ service.name }} logo" style="max-height: 80px; max-width: 250px; object-fit: contain;"></a>
+                <a href="{{ service.get_absolute_url }}"><img class="img-fluid card-logo" src="{{ service.logo.url }}" alt="{{ service.name }} logo"></a>
               </div>
               <div class="card__header">
               <h3 class="card__title"><a href="{{ service.get_absolute_url }}" class="text-decoration-none">{{ service.name }}</a></h3>
@@ -91,7 +91,7 @@
                 <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
                 <div class="card h-100 d-flex flex-column">
                   <div class="card__image__wide mb-4">
-                    <a href="{{ provider.get_absolute_url }}"><img class="img-fluid" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo" style="max-height: 80px; max-width: 250px; object-fit: contain;"></a>
+                    <a href="{{ provider.get_absolute_url }}"><img class="img-fluid card-logo" src="{{ provider.logo.url }}" alt="{{ provider.name }} logo"></a>
                   </div>
                   <div class="card__header">
                   <h3 class="card__title"><a href="{{ provider.get_absolute_url }}" class="text-decoration-none">{{ provider.name }}</a></h3>
@@ -136,7 +136,7 @@
             <div class="col-12 col-md-6 col-lg-3 mb-20 mb-lg-0">
             <div class="card h-100 d-flex flex-column">
               <div class="card__image__wide mb-4">
-                <a href="{{ partner.get_absolute_url }}"><img class="img-fluid" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo" style="max-height: 80px; max-width: 250px; object-fit: contain;"></a>
+                <a href="{{ partner.get_absolute_url }}"><img class="img-fluid card-logo" src="{{ partner.logo.url }}" alt="{{ partner.name }} logo"></a>
               </div>
               <div class="card__header">
               <h3 class="card__title"><a href="{{ partner.get_absolute_url }}" class="text-decoration-none">{{ partner.name }}</a></h3>