mobile card

css/components.css

@@ -44,6 +44,21 @@
     overflow: hidden;
     background-color: white;
 
+    @media (max-width: 768px) {
+        flex-direction: row;
+        align-items: stretch;
+
+        & > div:first-child {
+            width: 120px;
+            flex-shrink: 0;
+            aspect-ratio: 1 / 1;
+        }
+
+        & > div:last-child {
+            padding: 1rem;
+        }
+    }
+
     .greener {
         background-color: rgb(from var(--secondary-container) r g b / 0.3);
     }
@@ -51,6 +66,8 @@
     & img {
         display: block;
         width: 100%;
+        height: 100%;
+        object-fit: cover;
         scale: 1;
         transition: scale 0.7s;
     }