* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #152033;
  background: #f7f9fc;
}
.wrap { width: min(980px, 100%); margin: 0 auto; padding: 8px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.card {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #dfe6f2;
  border-top: 3px solid #2d6cdf;
  border-radius: 7px;
  box-shadow: 0 5px 16px rgba(16, 32, 64, .07);
}
.thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #dfe6f2; border: 0; }
.body { padding: 9px; }
.time { font-weight: 700; color: #2d6cdf; font-size: 12px; margin-bottom: 6px; line-height: 1.35; }
.title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.42;
  min-height: 2.9em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.channel { margin-top: 8px; font-size: 11px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty {
  padding: 28px;
  text-align: center;
  background: #fff;
  border: 1px solid #dfe6f2;
  border-radius: 8px;
  color: #64748b;
}
@media (max-width: 520px) {
  .wrap { padding: 6px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .body { padding: 6px; }
  .time { font-size: 10px; margin-bottom: 4px; }
  .title { font-size: 10.5px; line-height: 1.35; min-height: 2.7em; }
  .channel { margin-top: 5px; font-size: 9.5px; }
}