css optimation

setup.sh

@@ -1068,10 +1068,10 @@ cat <<HTML_END > templates/index.html
                 <td>
                 {% if game.steam_appid %}
                 <img src="https://cdn.cloudflare.steamstatic.com/steam/apps/{{ game.steam_appid }}/header.jpg"
-                     alt="Steam Header" style="height:64px;max-width:120px;object-fit:cover;">
+                     alt="Steam Header" class="game-cover">
                 {% elif game.url and 'gog.com' in game.url %}
                 <img src="{{ url_for('static', filename='gog_logo.png') }}"
-                     alt="GOG Logo" style="height:48px;max-width:120px;object-fit:contain;">
+                     alt="GOG Logo" class="game-cover">
                 {% endif %}
                 </td>
                 <td>{{ game.name }}</td>
@@ -1557,6 +1557,54 @@ body {
 .table-pdf td, .table-pdf th {
     padding: 4px 8px;
 }
+
+.game-cover {
+    width: 368px;
+    height: 172px;
+    max-width: 100%;
+    max-height: 35vw;
+    object-fit: contain;
+    background: #222;
+    border-radius: 8px;
+    display: block;
+    margin: 0 auto;
+    transition: width 0.2s, height 0.2s;
+}
+
+/* Responsiv für kleinere Bildschirme */
+@media (max-width: 1200px) {
+    .game-cover {
+        width: 260px;
+        height: 122px;
+    }
+}
+@media (max-width: 900px) {
+    .game-cover {
+        width: 180px;
+        height: 84px;
+    }
+}
+@media (max-width: 600px) {
+    .game-cover {
+        width: 120px;
+        height: 56px;
+    }
+}
+@media (max-width: 400px) {
+    .game-cover {
+        width: 90px;
+        height: 42px;
+    }
+}
+
+img.game-cover {
+    width: 368px;
+    height: 172px;
+    object-fit: contain;
+    background: #222;
+    border-radius: 8px;
+}
+
 CSS_END
 
 echo -e "\n\033[1;32m✅ Setup done! Seems to be okay!\033[0m"