:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0 auto; padding: 2rem 1rem 3rem;
  background: #111; color: #ddd;
  font: 16px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  max-width: 1100px;
}
header { margin-bottom: 1.5rem; }
h1 { margin: 0 0 .25rem; font-size: 1.5rem; color: #f80; font-weight: 600; }
header p { margin: 0; color: #888; }
.grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.grid figure { margin: 0; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 4px; overflow: hidden; }
.grid a { display: block; color: inherit; text-decoration: none; }
.grid img, .grid video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #000; }
.grid figcaption { padding: .4rem .6rem; font-size: .85rem; color: #aaa; }
.grid a:hover figcaption, .grid a:focus figcaption { color: #f80; }
footer { margin-top: 2rem; color: #666; font-size: .85rem; }