Add image preview to news listing cards

src/app/news/page.tsx

@@ -45,6 +45,20 @@ export default async function NewsPage() {
                 className="card hover"
                 style={{ display: "flex", flexDirection: "column" }}
               >
+                {a.image ? (
+                  <img
+                    src={a.image}
+                    alt=""
+                    className="w-full rounded-t-lg"
+                    style={{ aspectRatio: "16/9", objectFit: "cover" }}
+                  />
+                ) : (
+                  <div
+                    className="w-full rounded-t-lg"
+                    style={{ aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
+                  />
+                )}
+                <div style={{ padding: "0.75rem" }}>
                   <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
                     <Link href={`/news/${a.slug}`}>{a.title}</Link>
                   </h3>
@@ -52,6 +66,7 @@ export default async function NewsPage() {
                     {formatDate(a.createdAt)}
                   </p>
                   <p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
+                </div>
               </article>
             ))}
           </div>