From c608d2d9e90dbde7e1de1a53c5da5f6eeb69c4f6 Mon Sep 17 00:00:00 2001
From: Timo <6156589+Shik3i@users.noreply.github.com>
Date: Sat, 30 May 2026 16:40:55 +0200
Subject: [PATCH] style(website): standardize use-case image container heights
 to 150px and set object-fit contain to align headings

---
 website/index.html | 8 ++++----
 website/style.css  | 3 ++-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/website/index.html b/website/index.html
index bbd0f94..91ccc4c 100644
--- a/website/index.html
+++ b/website/index.html
@@ -444,8 +444,8 @@
                     <p lang="de">Synchronisiere eure Filme in Echtzeit und quatscht nebenbei auf Discord, Zoom oder im Tool eurer Wahl. Es fühlt sich an, als säßet ihr im selben Raum.</p>
                 </div>
                 <div class="use-case-card" data-reveal>
-                    <img src="assets/RemoteProf.webp" alt="A koala professor presenting on a screen to two remote student koalas" class="use-case-image" lang="en" width="272" height="161" loading="lazy">
-                    <img src="assets/RemoteProf.webp" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="161" loading="lazy">
+                    <img src="assets/RemoteProf.webp" alt="A koala professor presenting on a screen to two remote student koalas" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
+                    <img src="assets/RemoteProf.webp" alt="Ein Koala-Professor hält einen Vortrag auf einem Bildschirm vor zwei remote zugeschalteten Schüler-Koalas" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
                         <span lang="en">Remote Learning</span>
                         <span lang="de">Remote Learning</span>
@@ -454,8 +454,8 @@
                     <p lang="de">Analysiert Online-Tutorials, Vorlesungen oder Streams gemeinsam mit Mitschülern oder Kollegen. Pausiert und besprecht komplizierte Schritte in perfektem Sync.</p>
                 </div>
                 <div class="use-case-card" data-reveal>
-                    <img src="assets/KoalaCupple_New.webp" alt="Two cute koalas hugging while watching a screen together from far away" class="use-case-image" lang="en" width="272" height="141" loading="lazy">
-                    <img src="assets/KoalaCupple_New.webp" alt="Zwei niedliche Koalas umarmen sich und schauen gemeinsam einen Bildschirm aus der Ferne" class="use-case-image" lang="de" width="272" height="141" loading="lazy">
+                    <img src="assets/KoalaCupple_New.webp" alt="Two cute koalas hugging while watching a screen together from far away" class="use-case-image" lang="en" width="272" height="150" loading="lazy">
+                    <img src="assets/KoalaCupple_New.webp" alt="Zwei niedliche Koalas umarmen sich und schauen gemeinsam einen Bildschirm aus der Ferne" class="use-case-image" lang="de" width="272" height="150" loading="lazy">
                     <h3>
                         <span lang="en">Long-Distance Relationships</span>
                         <span lang="de">Fernbeziehungen</span>
diff --git a/website/style.css b/website/style.css
index 924d3c0..cb51048 100644
--- a/website/style.css
+++ b/website/style.css
@@ -1509,7 +1509,8 @@ html.lang-de [lang="en"] {
     display: block;
     width: 100%;
     max-width: 272px;
-    height: auto;
+    height: 150px;
+    object-fit: contain;
     border-radius: 8px;
     margin: 0 auto 0 auto;
 }