README: shrink demo gif grid

[FuJacob]

Summary

Drops every demo gif from 440x220 to 320x180 so the 2x2 grid stops filling the full README viewport on wide screens.

Validation

Visual.

Linked issues

Refs #611.

Greptile Summary

This PR shrinks the four demo <img> tags in the README from 440×220 to 320×180 to make the 2×2 grid less dominant on wide-screen viewports.

• The width reduction from 440 to 320 achieves the stated layout goal, but the new height of 180 shifts the aspect ratio from 2:1 to 16:9 (≈1.78:1). With both width and height attributes set, browsers stretch the image to fit exactly, so if the source GIFs have a 2:1 native ratio they will appear vertically squished at the new size.
• Dropping the height attribute and keeping only width=\"320\" would let browsers scale proportionally and avoid any distortion regardless of the GIFs' native dimensions.

Confidence Score: 3/5

The change successfully reduces grid width, but the new height introduces an aspect-ratio mismatch that will visually distort all four demo GIFs.

The width reduction is straightforward, but changing height from 220 to 180 shifts the aspect ratio from 2:1 to 16:9. Because both width and height are explicitly set, the browser will stretch every GIF to fit, which would make 2:1 content appear squished. The fix is simple (remove the height attribute), but as written the demo GIFs are likely to render incorrectly.

README.md — the explicit height value on all four img tags needs a second look to confirm it matches the native GIF dimensions.

Important Files Changed

Filename	Overview
README.md	Resizes four demo <img> tags from 440×220 (2:1) to 320×180 (16:9), changing the aspect ratio, which will distort GIFs unless they are natively 16:9.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["README 2×2 GIF grid"] --> B["Before: width=440 height=220\n(2:1 aspect ratio)"]
    A --> C["After: width=320 height=180\n(16:9 aspect ratio)"]
    B --> D["Native GIF dimensions unknown"]
    C --> D
    D -->|"GIFs are 2:1"| E["⚠️ New size distorts vertically"]
    D -->|"GIFs are 16:9"| F["✅ New size renders correctly"]
    D -->|"GIFs are 2:1"| G["Old size rendered correctly"]
    D -->|"GIFs are 16:9"| H["⚠️ Old size was distorted horizontally"]

Loading

_{Reviews (1): Last reviewed commit: "README: shrink demo gif grid to 320x180 ..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[greptile-apps]

Aspect ratio mismatch may distort GIFs

The original dimensions (440×220) have a 2:1 aspect ratio; the new dimensions (320×180) are 16:9 (≈1.78:1). When both width and height are set on an <img> element, the browser stretches the image to fill those exact pixels. If the source GIFs are actually 2:1, they will appear vertically squished in the new size. If they are 16:9, the original render was horizontally stretched. Either way, one of the two sizes is wrong. Consider specifying only width="320" (dropping height) so the browser scales proportionally and preserves the native aspect ratio.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!