.trends-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; background:#282828; padding:20px; border-radius:10px; } .trend-box { background:#1f1f1f; border-radius:10px; overflow:hidden; text-align:center; transition:transform 0.2s ease; } .trend-box:hover { transform:scale(1.05); } .trend-box img { width:100%; height:120px; object-fit:fill; border-bottom:1px solid #333; } .trend-box a { color:#00d8ff; text-decoration:none; display:block; padding:10px; font-size:14px; line-height:1.4; } .trend-title { color:#fff; font-size:22px; margin-bottom:15px; padding-left:10px; grid-column:1/-1; } .pagination { display:flex; justify-content:center; gap:8px; margin:20px 0; flex-wrap:wrap; } .pagination a { display:block; padding:6px 12px; background:#1f1f1f; color:#00d8ff; border-radius:6px; text-decoration:none; } .pagination a.current { background:#00d8ff; color:#1f1f1f; font-weight:bold; } @media (max-width: 1024px) { .trends-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .trends-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .trends-grid { grid-template-columns: repeat(2, 1fr); } }