/* ============================================================ Brazino777 BR — landing v1 Tema: grafite profundo + dourado + vermelho da marca. Mobile-first. ============================================================ */ :root{ /* Cores */ --bg-0:#0d0d11; --bg-1:#14141a; --bg-2:#1a1a21; --surface:#1f1f27; --surface-2:#272730; --surface-3:#32323d; --border:#31313c; --border-2:#414150; --gold:#f5c33f; --gold-2:#dfa018; --gold-glow:rgba(245,195,63,.45); --red:#e0243c; --red-2:#b01327; --green:#2fa564; --green-2:#217f4c; --purple:#6f4bd8; --text:#f4f4f8; --muted:#a2a2b4; --muted-2:#6e6e83; /* Espacamento (8pt) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --radius:14px; --radius-lg:20px; --radius-sm:9px; --shadow:0 10px 30px -12px rgba(0,0,0,.7); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8); --container:1240px; --sidebar:212px; --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} /* overflow-x має бути на : якщо його ставити лише на , body стає скрол-контейнером і переходи по якорях перестають працювати. */ /* scroll-behavior:smooth навмисно НЕ вмикаємо: сторінка ~15 000 px, плавний скрол тривав би секунди і виглядав як «нічого не сталося». */ html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{ font-family:var(--font); font-size:16px;line-height:1.65;color:var(--text); background: radial-gradient(1100px 520px at 50% -180px,#2a1f1c 0%,transparent 62%) no-repeat, linear-gradient(180deg,var(--bg-1) 0%,var(--bg-0) 100%) no-repeat; background-color:var(--bg-0); min-height:100dvh;overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--gold);text-decoration:none} a:hover{color:#ffd77a} h1,h2,h3{line-height:1.22;font-weight:800;letter-spacing:-.01em} button,input,select{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px} /* sticky-хедер ~102px: без відступу якір ховає заголовок під ним */ section[id],h3[id],main[id],footer[id]{scroll-margin-top:118px} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-4)} .skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--gold); color:#1a1300;padding:var(--s-2) var(--s-4);border-radius:0 0 var(--radius-sm) 0;font-weight:700} .skip-link:focus{left:0} /* ============ HEADER ============ */ .site-header{position:sticky;top:0;z-index:120; background:linear-gradient(180deg,rgba(19,19,25,.98),rgba(19,19,25,.9)); backdrop-filter:blur(12px);border-bottom:1px solid var(--border)} .header-top{display:flex;align-items:center;gap:var(--s-4);min-height:62px} .brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0} .brand-mark{width:40px;height:40px;border-radius:11px;flex-shrink:0; display:grid;place-items:center;font-weight:900;font-size:.95rem;color:#171100; background:linear-gradient(145deg,var(--gold) 0%,var(--gold-2) 100%); box-shadow:0 4px 14px -4px var(--gold-glow)} .brand-text{display:flex;flex-direction:column;line-height:1.05} .brand-name{font-size:1.18rem;font-weight:900;letter-spacing:-.02em; background:linear-gradient(90deg,#fff,#ffd77a);-webkit-background-clip:text;background-clip:text;color:transparent} .brand-sub{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);font-weight:700} .auth-form{margin-left:auto;display:flex;align-items:center;gap:var(--s-3)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 20px;border-radius:var(--radius-sm);border:0;cursor:pointer; font-weight:800;font-size:.92rem;letter-spacing:.01em;white-space:nowrap; transition:transform .12s ease,box-shadow .12s ease,filter .12s ease} .btn:hover{transform:translateY(-1px);filter:brightness(1.06)} .btn:active{transform:translateY(0)} .btn-login{background:linear-gradient(180deg,var(--green),var(--green-2));color:#04230b; box-shadow:0 6px 18px -8px rgba(47,165,100,.85)} .btn-register{background:linear-gradient(180deg,var(--red),var(--red-2));color:#fff; box-shadow:0 6px 18px -8px rgba(224,36,60,.85)} .btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));color:#1a1300; box-shadow:0 6px 18px -8px var(--gold-glow)} .btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border-2)} .btn-lg{padding:14px 30px;font-size:1rem} .btn-sm{padding:7px 14px;font-size:.82rem} .btn-block{width:100%} .lang{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:var(--radius-sm); background:var(--surface-2);border:1px solid var(--border);font-size:.8rem;font-weight:700;color:var(--muted)} .lang .flag{width:18px;height:13px;border-radius:2px;overflow:hidden;display:block; background:linear-gradient(180deg,#009b3a 0 33%,#ffdf00 33% 66%,#002776 66% 100%)} /* nav secundario */ .header-nav{border-top:1px solid var(--border);background:rgba(13,13,18,.6)} .header-nav ul{display:flex;gap:var(--s-5);list-style:none;padding:0;margin:0; overflow-x:auto;scrollbar-width:none} .header-nav ul::-webkit-scrollbar{display:none} .header-nav a{display:block;padding:12px 2px;font-size:.88rem;font-weight:700; color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap} .header-nav a:hover{color:var(--text)} .header-nav a.is-active{color:var(--gold);border-bottom-color:var(--gold)} /* ============ LAYOUT ============ */ .layout{display:grid;grid-template-columns:var(--sidebar) 1fr;gap:var(--s-5); padding-block:var(--s-5) var(--s-8);align-items:start} .layout > *{min-width:0} /* ---------- Sidebar ---------- */ .sidebar{position:sticky;top:112px;display:flex;flex-direction:column;gap:var(--s-4)} .bonus-card{position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--border-2);padding:var(--s-4) var(--s-3) var(--s-3);text-align:center; background:linear-gradient(160deg,#3d2a18 0%,#2a1d14 60%,#1c1510 100%); box-shadow:var(--shadow)} .bonus-card::after{content:"";position:absolute;inset:-40% -60% auto auto;width:180px;height:180px; background:radial-gradient(circle,var(--gold-glow),transparent 68%);pointer-events:none} .bonus-title{font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold)} .bonus-amount{margin-top:var(--s-2);font-size:1.5rem;font-weight:900;color:#fff;line-height:1.1} .bonus-fs{font-size:.8rem;color:var(--muted);margin-top:2px} .bonus-card .btn{margin-top:var(--s-3)} .side-search{position:relative} .side-search input{width:100%;padding:10px 12px 10px 34px;border-radius:var(--radius-sm); background:var(--bg-0);border:1px solid var(--border);font-size:.86rem} .side-search::before{content:"\2315";position:absolute;left:12px;top:50%;transform:translateY(-50%); color:var(--muted-2);font-size:1.1rem} .side-menu{list-style:none;padding:0;margin:0;border:1px solid var(--border); border-radius:var(--radius);overflow:hidden;background:var(--surface)} .side-menu li+li{border-top:1px solid var(--border)} .side-menu a{display:flex;align-items:center;gap:10px;padding:11px var(--s-3); font-size:.87rem;font-weight:600;color:var(--muted)} .side-menu a:hover{background:var(--surface-2);color:var(--text)} .side-menu .ico{width:20px;text-align:center;font-size:1rem;flex-shrink:0} .side-promo{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-3); background:var(--surface);text-align:center} .side-promo strong{display:block;color:var(--gold);font-size:.9rem} .side-promo p{font-size:.78rem;color:var(--muted);margin-top:4px} /* ============ HERO / BANNER ============ */ .hero{position:relative;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--border-2);box-shadow:var(--shadow-lg);isolation:isolate} .slides{position:relative;min-height:330px} .slide{position:absolute;inset:0;opacity:0;visibility:hidden; transition:opacity .5s ease;display:grid;align-items:center; padding:var(--s-6) var(--s-7);grid-template-columns:1fr auto;gap:var(--s-5)} .slide.is-active{opacity:1;visibility:visible;position:relative} .slide-1{background: linear-gradient(100deg,rgba(8,8,11,.94) 0%,rgba(18,14,12,.62) 42%,rgba(28,20,14,.08) 72%), url("../img/hero/banner-bonus.webp") center right/cover no-repeat, #0f0f14} .slide-2{background: linear-gradient(100deg,rgba(8,8,11,.94) 0%,rgba(18,14,12,.62) 42%,rgba(28,20,14,.08) 72%), url("../img/hero/banner-pix.webp") center right/cover no-repeat, #0f0f14} .slide-3{background: linear-gradient(100deg,rgba(8,8,11,.94) 0%,rgba(18,14,12,.62) 42%,rgba(28,20,14,.08) 72%), url("../img/hero/banner-app.webp") center right/cover no-repeat, #0f0f14} .slide-copy{max-width:560px} .slide-kicker{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px; background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.16); font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)} .slide-title{margin-top:var(--s-3);font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:800;line-height:1.22;letter-spacing:-.015em; text-shadow:0 2px 26px rgba(0,0,0,.5)} .slide p{margin-top:var(--s-3);color:#dcdde8;max-width:46ch;font-size:1rem} .slide-actions{margin-top:var(--s-4);display:flex;gap:var(--s-3);flex-wrap:wrap} .slide-badge{width:132px;height:132px;border-radius:50%;display:grid;place-items:center; text-align:center;font-weight:900;color:#1a1300;line-height:1.05;flex-shrink:0; background:radial-gradient(circle at 35% 30%,#fff3cd,var(--gold) 45%,var(--gold-2) 100%); box-shadow:0 0 0 8px rgba(245,195,63,.16),0 16px 40px -12px rgba(0,0,0,.8)} .slide-badge b{display:block;font-size:2.1rem} .slide-badge span{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase} .hero-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%); display:flex;gap:8px;z-index:3} .hero-dots button{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.35)} .hero-dots button.is-active{background:var(--gold);width:24px;border-radius:999px} .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.45);color:#fff;cursor:pointer;font-size:1.1rem;display:grid;place-items:center} .hero-arrow:hover{background:rgba(0,0,0,.7)} .hero-prev{left:12px} .hero-next{right:12px} /* ---------- Trust strip ---------- */ .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-top:var(--s-4)} .trust-item{display:flex;align-items:center;gap:10px;padding:var(--s-3); background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} .trust-item .ico{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-3);font-size:1rem} .trust-item b{display:block;font-size:.85rem} .trust-item span{font-size:.74rem;color:var(--muted)} /* ============ SECOES ============ */ .section{margin-top:var(--s-7)} .section-head{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap} .section-head h2{font-size:clamp(1.25rem,2.4vw,1.7rem)} .section-head .more{margin-left:auto;font-size:.85rem;font-weight:700} .section > p{color:var(--muted);max-width:76ch} .section > p + p{margin-top:var(--s-3)} .section h3{margin-top:var(--s-5);font-size:1.15rem} .offer-item h3{margin-top:0} .section h3 + p{margin-top:var(--s-2)} .lead{font-size:1.02rem;color:#cdcfdc} .tabs{display:flex;gap:var(--s-2);flex-wrap:wrap} .tab{padding:7px 15px;border-radius:999px;border:1px solid var(--border); background:var(--surface);color:var(--muted);font-size:.82rem;font-weight:700;cursor:pointer} .tab.is-active{background:var(--surface-3);color:var(--gold);border-color:var(--border-2)} /* ---------- Grade de jogos ---------- */ .games{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3)} .game{position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--border);background:var(--surface);isolation:isolate} .game-thumb{aspect-ratio:1/1;width:100%;height:auto;object-fit:cover;display:block; background:var(--surface-2)} .game-body{padding:10px var(--s-3) var(--s-3)} .game-title{font-size:.84rem;font-weight:700;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .game-prov{font-size:.7rem;color:var(--muted-2);margin-top:2px} .game-hover{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; align-items:center;gap:8px;background:rgba(10,10,15,.82);opacity:0;transition:opacity .18s ease} .game:hover .game-hover,.game:focus-within .game-hover{opacity:1} /* ---------- Blocos de bonus ---------- */ .offers{display:grid;gap:var(--s-3)} .offer-item{border:1px solid var(--border);border-radius:var(--radius); background:var(--surface);padding:var(--s-4) var(--s-5) var(--s-5); transition:border-color .16s ease} .offer-item:hover{border-color:var(--border-2)} .offer-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap} .offer-pos{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:grid;place-items:center; background:var(--surface-3);font-weight:900;font-size:.85rem;color:var(--gold)} .offer-head h3{margin:0;font-size:1.06rem} .offer-tag{display:block;font-size:.78rem;color:var(--muted-2);margin-top:2px} .offer-score{margin-left:auto;display:inline-flex;align-items:center;gap:7px; font-weight:900;color:var(--green);font-size:1.05rem;white-space:nowrap} .stars{color:var(--gold);font-size:.8rem;letter-spacing:1px} .offer-item p{margin-top:var(--s-3);color:var(--muted);font-size:.92rem;max-width:74ch} .offer-item .btn{margin-top:var(--s-4);width:100%;padding-block:12px} /* ---------- Pros e contras ---------- */ .proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)} .pc{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-4);background:var(--surface)} .pc h3{display:flex;align-items:center;gap:8px;font-size:1rem;margin-top:0} .pc.pros h3{color:var(--green)} .pc.cons h3{color:var(--red)} .pc ul{list-style:none;padding:0;margin-top:var(--s-3);display:grid;gap:8px} .pc li{display:flex;gap:9px;font-size:.9rem;color:var(--muted)} .pc li::before{flex-shrink:0;font-weight:900} .pc.pros li::before{content:"+";color:var(--green)} .pc.cons li::before{content:"\2013";color:var(--red)} /* ---------- Tabela generica ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)} table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px;background:var(--surface)} table.data th,table.data td{padding:11px var(--s-4);text-align:center;border-bottom:1px solid var(--border)} table.data th{background:var(--surface-2);font-size:.73rem;text-transform:uppercase; letter-spacing:.07em;color:var(--muted-2)} table.data tr:last-child td{border-bottom:0} table.data td{color:var(--muted)} table.data td:first-child{color:var(--text);font-weight:700} /* колонка з оцінкою — акцентом */ table.t-rating td:nth-child(2){white-space:nowrap;color:var(--green);font-weight:800} /* ---------- Passos ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)} .step{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-4);background:var(--surface)} .step b{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;margin-bottom:10px; background:linear-gradient(145deg,var(--gold),var(--gold-2));color:#1a1300;font-size:.9rem} .step-title{font-size:.95rem;font-weight:800;line-height:1.22} .step p{margin-top:6px;font-size:.84rem;color:var(--muted)} /* ---------- CTA ---------- */ .cta{margin-top:var(--s-7);border-radius:var(--radius-lg);border:1px solid var(--border-2); padding:var(--s-6);text-align:center;box-shadow:var(--shadow); background:radial-gradient(700px 260px at 50% -40px,rgba(245,195,63,.24),transparent 70%), linear-gradient(160deg,#2e2118,#15121a)} .cta h2{font-size:clamp(1.3rem,2.6vw,1.9rem)} .cta p{margin-top:var(--s-3);color:var(--muted);max-width:56ch;margin-inline:auto} .cta .btn{margin-top:var(--s-4)} .cta small{display:block;margin-top:var(--s-3);color:var(--muted-2);font-size:.75rem} /* ---------- FAQ ---------- */ .faq{display:grid;gap:10px} .faq details{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface); overflow:hidden} .faq summary{list-style:none;cursor:pointer;padding:var(--s-3) var(--s-4); font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:var(--s-3)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;color:var(--gold);font-size:1.3rem;font-weight:400; transition:transform .18s ease} .faq details[open] summary::after{transform:rotate(45deg)} .faq details[open] summary{border-bottom:1px solid var(--border)} .faq .faq-body{padding:var(--s-3) var(--s-4) var(--s-4);color:var(--muted);font-size:.9rem} /* ============ FOOTER ============ */ .site-footer{margin-top:var(--s-8);border-top:1px solid var(--border);background:var(--bg-1)} .footer-providers{background:var(--bg-2);border-block:1px solid var(--border);padding-block:var(--s-7)} .logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-5) var(--s-4);align-items:center; justify-items:center} .logo-img{width:100%;max-width:132px;height:30px;object-fit:contain; opacity:.55;filter:grayscale(1);transition:opacity .18s ease,filter .18s ease} .logo-img:hover{opacity:1;filter:grayscale(0)} .footer-pay{background:var(--bg-0);padding-block:var(--s-5);border-bottom:1px solid var(--border)} .pay-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-4) var(--s-5)} .pay-img{height:34px;width:auto;max-width:110px;object-fit:contain; opacity:.85;transition:opacity .18s ease,transform .18s ease} .pay-img:hover{opacity:1;transform:translateY(-2px)} .badge-18{width:34px;height:34px;border-radius:50%;border:2px solid var(--red); display:grid;place-items:center;font-size:.72rem;font-weight:900;color:var(--red);flex-shrink:0} .footer-legal{padding-block:var(--s-6);text-align:center} .footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2) var(--s-5); list-style:none;padding:0;margin-bottom:var(--s-4)} .footer-nav a{font-size:.84rem;font-weight:600;color:var(--muted)} .footer-nav a:hover{color:var(--text)} .footer-legal p{font-size:.74rem;color:var(--muted-2);max-width:900px;margin-inline:auto;line-height:1.7} .footer-legal p + p{margin-top:var(--s-3)} .footer-updated{margin-top:var(--s-4);font-size:.76rem;color:var(--muted-2)} .footer-updated time{color:var(--muted);font-weight:600} .footer-seal{margin-top:var(--s-4);display:inline-flex;align-items:center;gap:10px; padding:9px var(--s-4);border-radius:var(--radius-sm); border:1px solid var(--border-2);background:var(--surface);font-size:.76rem;font-weight:700;color:var(--muted)} /* ============ RESPONSIVO ============ */ @media (max-width:1100px){ .games{grid-template-columns:repeat(4,1fr)} .logo-grid{grid-template-columns:repeat(4,1fr)} } @media (max-width:980px){ .layout{grid-template-columns:1fr} .sidebar{position:static} .sidebar .side-menu,.sidebar .side-search{display:none} .bonus-card{display:grid;grid-template-columns:1fr auto;align-items:center; text-align:left;column-gap:var(--s-4)} .bonus-card h3{grid-column:1;grid-row:1} .bonus-amount{grid-column:1;grid-row:2;margin-top:0;font-size:1.3rem} .bonus-fs{grid-column:1;grid-row:3} .bonus-card .btn{grid-column:2;grid-row:1/4;margin-top:0;width:auto;padding-inline:22px} .trust{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .offer-item{padding:var(--s-4)} .offer-score{margin-left:0;width:100%;order:3} } @media (max-width:820px){ .slide-1,.slide-2,.slide-3{background-blend-mode:normal} .slide-1{background-image:linear-gradient(180deg,rgba(8,8,11,.62) 0%,rgba(8,8,11,.93) 62%),url("../img/hero/banner-bonus.webp")} .slide-2{background-image:linear-gradient(180deg,rgba(8,8,11,.62) 0%,rgba(8,8,11,.93) 62%),url("../img/hero/banner-pix.webp")} .slide-3{background-image:linear-gradient(180deg,rgba(8,8,11,.62) 0%,rgba(8,8,11,.93) 62%),url("../img/hero/banner-app.webp")} .slide-1,.slide-2,.slide-3{background-position:center top,center top;background-size:cover,cover} } @media (max-width:720px){ .games{grid-template-columns:repeat(3,1fr)} .proscons{grid-template-columns:1fr} .slide{grid-template-columns:1fr;padding:var(--s-5) var(--s-4) var(--s-6)} .slide-badge{display:none} .slides{min-height:250px} .logo-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-4) var(--s-3)} .pay-img{height:28px} .brand-sub{display:none} } @media (max-width:560px){ .games{grid-template-columns:repeat(2,1fr)} .trust{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .lang{display:none} .btn{padding:9px 13px;font-size:.83rem} .header-top{gap:var(--s-2);min-height:56px} .brand-mark{width:34px;height:34px;border-radius:9px;font-size:.8rem} .brand-name{font-size:1rem} .auth-form{gap:6px} .header-nav a{padding:10px 2px;font-size:.82rem} .header-nav ul{gap:var(--s-4)} .slide-title{font-size:1.35rem} .slide p{font-size:.92rem} .slide-actions .btn{padding:11px 18px;font-size:.9rem} .section{margin-top:var(--s-6)} .cta{padding:var(--s-5) var(--s-4)} .pay-grid{gap:var(--s-4)} } @media (max-width:400px){ .brand-name{font-size:.9rem} .brand-mark{width:30px;height:30px;font-size:.72rem} .btn{padding:8px 11px;font-size:.78rem} .games{gap:var(--s-2)} } @media (prefers-reduced-motion:reduce){ *{animation:none;transition:none} }