:root { color-scheme: dark; font-family: Arial, sans-serif; background: #081c2b; color: #f5f7fa; } * { box-sizing: border-box; } body { margin: 0; } header { padding: 30px max(20px, calc((100vw - 1100px)/2)); background: #0d3146; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } header span { color: #7ddb3a; font-size: 2.4rem; } h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2.3rem); } header p { color: #9ab5c4; margin: 0; } main { max-width: 1100px; margin: auto; padding: 28px 20px; } .filters { display: flex; gap: 10px; margin-bottom: 18px; } button { border: 1px solid #477185; border-radius: 22px; background: transparent; color: inherit; padding: 10px 16px; font-size: 1rem; } button.active { background: #7ddb3a; color: #072235; border-color: #7ddb3a; font-weight: bold; } #clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } article { background: #103247; border-radius: 12px; overflow: hidden; } video { display: block; width: 100%; background: #000; aspect-ratio: 16/9; } article div { padding: 13px; display: flex; justify-content: space-between; gap: 8px; align-items: center; } time { color: #abc1cd; font-size: .85rem; } a { color: #7ddb3a; font-weight: bold; }