:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #222;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1008px; margin: 0 auto; padding: 48px 24px; }
h1 { margin: 0 0 24px; font-size: 22px; font-weight: 650; line-height: 1.4; letter-spacing: -.04em; }
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.site { display: block; overflow: hidden; height: 100%; border: 1px solid #e7e7e7; border-radius: 8px; color: inherit; text-decoration: none; }
.site img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.site h2 { margin: 0; padding: 12px 14px 16px; font-size: 15px; font-weight: 600; line-height: 1.65; letter-spacing: -.035em; word-break: keep-all; overflow-wrap: anywhere; }
.site:hover { border-color: #aaa; }
.site:focus-visible { outline: 3px solid #333; outline-offset: 4px; }
@media (min-width: 600px) {
  .sites { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 380px) {
  main { padding: 32px 20px; }
  .sites { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; }
  .site h2 { padding: 10px 12px 14px; font-size: 14px; }
}