Dashboard-Cards: horizontales Layout mit Bild links, Body rechts

wwwroot/css/dashboard.css

@@ -16,8 +16,8 @@
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
-  gap: var(--page-spacing);
+  gap: var(--box-spacing);
 }
 
 .card {
@@ -25,9 +25,10 @@
   background: var(--f3-bg);
   border: var(--border-width) solid var(--f3-border);
   display: flex;
-  flex-direction: column;
   overflow: visible;
   border-radius: var(--border-radius);
+  padding: var(--box-padding);
+  gap: var(--box-spacing);
 }
 
 .card.clickable {
@@ -44,6 +45,10 @@
   background: var(--f2-bg);
   overflow: hidden;
   border-radius: var(--border-radius) var(--border-radius) 0 0;
+  flex: 0 0 8em;
+  height: 8em;
+  align-self: center;
+  border-radius: var(--border-radius);
 }
 
 .card-image img {
@@ -53,9 +58,10 @@
 }
 
 .card-body {
-  padding: var(--box-padding);
   display: flex;
   flex-direction: column;
+  overflow: hidden;
+  flex: 3;
 }
 
 .card-title-row {

wwwroot/css/mobile.css

@@ -13,7 +13,4 @@
     width: 100px;
     min-width: 100px;
   }
-  .card-grid {
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-  }
 }