improve lookbook preview images and descriptions

apps/lookbook/src/components/Card.astro

@@ -95,12 +95,13 @@ const previewImage = image ? demoPreviewImageUrl(image) : defaultTeaserImage;
   .card-image-container {
     margin: 0 -1.3rem;
     aspect-ratio: 16/10;
+    overflow: hidden;
   }
   .card-image {
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+    aspect-ratio: 16/10;
   }
   .tags {
     margin: -0.1rem -0.3rem 0.5rem;

apps/lookbook/src/pages/demos/_animated-sprites.json

@@ -1,6 +1,6 @@
 {
   "title": "animated sprites",
-  "description": "Textured sprites with frame based animations",
+  "description": "Frame-based animation with textured sprites",
   "url": "/demos/animated-sprites",
   "tags": [
     "AnimatedSprites",

apps/lookbook/src/pages/demos/_clouds.json

@@ -1,6 +1,6 @@
 {
   "title": "clouds",
-  "description": "A simple 2.5d clouds demo",
+  "description": "A rough demo sketch of 2.5d clouds",
   "url": "/demos/clouds",
   "tags": [
     "Stage2D",

apps/lookbook/src/pages/demos/_splotch-starfield.json

@@ -1,6 +1,6 @@
 {
   "title": "splotch starfield",
-  "description": "A splotch starfield demo",
+  "description": "A retro starfield with post processing",
   "url": "/demos/splotch-starfield",
   "tags": [
     "demo",

apps/lookbook/src/pages/demos/textured-quads-from-texture-atlas.astro

@@ -15,8 +15,7 @@ import {title} from './_textured-quads-from-texture-atlas.json';
     overflow-y: hidden;
   }
   body {
-    background-color: #391e39;
-    background: radial-gradient(circle, rgba(189, 70, 98, 1) 0%, rgba(37, 4, 73, 1) 100%);
+    background-color: #3f313f;
   }
   .texture-preview {
     background-color: rgba(86, 101, 115, 80%);