:root { color-scheme: light; font-family: "DM Sans", sans-serif; background: #f4efe8; color: #111111; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); background: #f4efe8; }
main { width: min(1180px, 100%); }
.advertisement a { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: #09100d; box-shadow: 0 30px 80px rgba(0,0,0,.38); }
.advertisement img, .advertisement video { display: block; width: 100%; max-height: calc(100vh - 96px); object-fit: contain; }
.advertisement span { position: absolute; right: 16px; bottom: 16px; padding: 12px 16px; border-radius: 999px; background: #f28a2e; color: #111111; font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.empty-state { padding: 64px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; text-align: center; background: rgba(9,16,13,.72); }
.empty-state p { margin: 0; color: #b9c9c1; }
@media (max-width: 560px) { body { padding: 0; } .advertisement a { border: 0; border-radius: 0; } .advertisement img, .advertisement video { max-height: calc(100vh - 50px); } .advertisement span { position: static; display: block; border-radius: 0; text-align: center; } }