/* =====================================================================
   ne-2c — premium / editorial restyle layer  (direction "2c", Sep 2026)

   Loaded AFTER ne-styles.lfmqrq.css. Deliberately CSS-ONLY: no markup or
   JS changes, so every renderer, hook and hover behaviour keeps working.
   Remove this one <link> to get the old look back.

   What it does:
     1. neutral palette — gold accent retired, ink on near-black
     2. display type Anton -> Bodoni Moda, body Barlow -> Space Grotesk
     3. every product photo sits on a light tile (the .ph-light pattern,
        applied to all wells instead of just creatine)
     4. glows, gradients and blur panels flattened to hairline rules
   ===================================================================== */

:root{
  --ink:#0B0B0C;--panel:#101011;--panel-2:#141416;--panel-3:#1A1A1C;
  --yellow:#F1F1F3;--yellow-deep:#DCDCE0;--blue:#B9BCC4;--blue-deep:#8E9199;
  --line:rgba(241,241,243,.10);--line-2:rgba(241,241,243,.17);
  --mut:#9A9BA2;--mut-2:#7C7D85;--txt:#F1F1F3;
}
html{background:#0B0B0C}
body{font-family:'Space Grotesk',system-ui,sans-serif}

/* ---- 2. type ---- */
.display,
.loc-city,
.nav-in .nm,
.hero h1,
.deals-strip .tag,
.pb-h,
.foot-mark,
.gc-amt,
.bw-name,
.bt-track span,
.gm-title,
.ok-id,
.dp-price b,
.pcard .ph .ph-fb,
.pcard .price,
.hero-copy h1,
.feat-card .fprice,
.stat-i .v,
.h2,
.vet-plate b,
.rail .rcard .rb .rpr,
.spotlight h3,
.spotlight .sp-price,
.bundle .bt,
.bundle .bprice .now,
.news-in h3,
.loc-strip .marquee span,
.rew-card .rc-pts,
.rw-mbrand,
.rw-mtier,
.rw-mpts,
.cr-line.total span:last-child,
.rx-tierlabel,
.rx-pts,
.hive-pts,
.rwm-how-i b,
.mem-sum b,
.drawer-h h3,
.ci .ci-ph span,
.ci .ci-info .p,
.sub-row.total b,
.modal h3,
.pd-ph span,
.pd-price .p,
.admin-bar .t,
.gate-card h2,
.stat .v,
.ov-hello h2,
.kpi .kval,
.rankrow .rn,
.inv-strip .iv,
.osum .ov,
.arow .a-ph span,
.arow .a-pr,
.order .oid,
.order .ot,
.shop-mid h3,
.ne-stat .v,
#neBuyBar .bb-name,
#neBuyBar .bb-price,
#tab-ops .op-h h3,
.rs-aud .n,
.mg-kpi .v,
.zr-stat .v,
.zr-row.big b,
.usual-h b,
#mHero h1,#mHero .mh-h1{font-family:'Bodoni Moda',Georgia,serif;text-transform:none;letter-spacing:0;font-weight:400}
body,
.nm .y,
.feat-card .fprice .was,
.rail .rcard .rb .rpr .was,
.spotlight .sp-price .was,
.rew-card .rc-pts span,
.rw-mbrand small,
.rw-mpts span,
.hive-ring text,
.admin-bar .t small,
.arow .a-pr .w,
.splash-tag,
.rw-inline b,
.sp-stock,
.pcard .spec,
.kbd-hint,
.pd-share,
.skip-link,
#mobShopSearch input,
.rv h4,
.rv-avg b,
#mHero .mh-p,
#mHero .mh-b span,
#mFoot b,
#mFoot .mf-l,
#mFoot .mf-links a,
#mFoot .mf-fda{font-family:'Space Grotesk',system-ui,sans-serif}
.hero h1,.hero-copy h1{font-size:62px;line-height:1.03}
.h2{font-size:34px;line-height:1.1}
.nav-in .nm{font-size:24px;line-height:.9}
.nm small{font-family:'Space Grotesk',sans-serif;letter-spacing:3.4px}
.eyebrow,.kick,.cat-l,.pcard .cat-l{letter-spacing:2.2px;font-size:10px;font-weight:600}

/* ---- 3. product photos on light tiles ---- */
.pcard .ph,.pcard .ph.ph-light,
.rail .rcard .rph,.rail .rcard .rph.ph-light,
.feat-card .fart,.pd-ph,.ci .ci-ph,.arow .a-ph{
  background:var(--tile,#F5F3EF)!important;border-radius:0!important}
.pcard .ph img,.pcard .ph.ph-light img,
.rail .rcard .rph img,.rail .rcard .rph.ph-light img{
  object-fit:contain!important;padding:14px!important}
.pd-ph img{object-fit:contain!important;padding:26px!important}
.ci .ci-ph img,.arow .a-ph img{object-fit:contain!important;padding:5px!important}
.spotlight .sp-art{background:var(--tile,#F5F3EF);min-height:340px;padding:30px}
.spotlight .sp-art .glow,.hero-glow{display:none!important}
.pcard .ph .ph-fb,.pd-ph span,.ci .ci-ph span,.arow .a-ph span{color:#8A857C}

/* ---- 4. flatten ---- */
.pcard,.rail .rcard,.bundle,.goal,.review,.feat-card,.loc-card,.news-in,.rew-card,.spotlight{
  border-radius:0!important;background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important}
.loc-card::before,.loc-card::after,.pcard::after,.spotlight::after,.big-y::after,.place-btn::after{display:none!important}
.pcard,.rail .rcard,.bundle,.goal,.review,.loc-card{background:#0B0B0C;border:1px solid var(--line)}
.pcard:hover,.rail .rcard:hover,.bundle:hover,.goal:hover,.loc-card:hover{
  transform:none!important;border-color:var(--line-2)}
.feat-card{background:#0B0B0C;border:1px solid var(--line-2);padding:24px}
.hero-vid{filter:grayscale(1) contrast(1.08) brightness(.42);opacity:1}

/* buttons: squared, ink on light */
.big-y,.feat-card .fbuy,.news-form button,.checkout-btn,.place-btn,.gate-btn,.loc-btn.primary{
  background:#F1F1F3;color:#0B0B0C;border:0;border-radius:0;
  font-weight:600;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;padding:16px 26px}
.big-y:hover,.feat-card .fbuy:hover,.news-form button:hover,.checkout-btn:hover,.place-btn:hover{
  background:#DCDCE0;box-shadow:none;transform:none}
.big-ghost,.loc-btn,.rail .rcard .radd{border-radius:0;background:transparent;border:1px solid var(--line-2);color:var(--txt);font-weight:600;letter-spacing:1.2px;text-transform:uppercase;font-size:11.5px}
.rail .rcard .radd:hover{background:#F1F1F3;color:#0B0B0C;border-color:#F1F1F3}

/* badges + accents that used to be gold */
.feat-card .fbadge,.pcard .badge,.rcard .badge,.rail .rcard .rph .badge{
  background:#0B0B0C;color:#F1F1F3;border:1px solid rgba(241,241,243,.34);border-radius:0;
  font-size:9.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;padding:6px 10px}
.pcard .price.sale{color:#F1F1F3}
.pcard .spec,.pcard .spec.lead{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:0}
.loc-note{background:transparent;border:1px solid var(--line-2);color:var(--txt);border-radius:0;letter-spacing:1.4px;text-transform:uppercase}
.pcard .ph::after{background:rgba(11,11,12,.86);color:#F1F1F3;letter-spacing:1.6px;font-size:9.5px}
.pcard .ph:focus-visible{outline-color:#F1F1F3}

/* nav + inputs */
nav{background:rgba(11,11,12,.72);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
nav.scrolled{background:rgba(11,11,12,.94)}
.nav-links .nl{border-radius:0;font-weight:500;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase}
input,select,textarea,.news-form input{border-radius:0}

/* ---- 5. retire the remaining colour accents ---- */
.hero h1 .y,.hero-copy h1 .y,.h2 .y,.nm .y,.news-in h3 .y{color:#F1F1F3}
.hero h1 .b,.hero-copy h1 .b,.h2 .b{color:#F1F1F3;font-style:italic}
.eyebrow{background:transparent;border:1px solid var(--line-2);border-radius:0;
  color:rgba(241,241,243,.78);font-size:10px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;padding:9px 14px;display:inline-flex;align-items:center;gap:9px}
.eyebrow .d,.nav-status .d,.loc-open .d{background:#F1F1F3!important;box-shadow:none!important;animation:none!important}
.loc-open,.pc-urg{color:rgba(241,241,243,.65)}
.rew-pill{background:transparent;border:1px solid var(--line-2);border-radius:0;color:var(--txt);
  font-weight:600;font-size:11px;letter-spacing:1.3px;text-transform:uppercase}
.rew-pill svg,.search svg{color:var(--mut)}
.hero-points{gap:22px}
.hero-points span{font-size:10.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:rgba(241,241,243,.6)}
.hero-cta{margin-top:26px}
/* trust + section headers */
.trust-in,.stat-i .v{color:var(--txt)}
.kick{color:rgba(241,241,243,.5)}

/* ---- 6. beat the gold-gradient text and !important pill ---- */
.hero-copy h1 .y,.hero h1 .y,.h2 .y,.pb-h .y,.news-in h3 .y,.shop-mid h3 .y,.nm .y{
  background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;
  -webkit-text-fill-color:#F1F1F3!important;color:#F1F1F3!important;text-shadow:none!important}
.hero-copy h1 .b,.hero h1 .b{color:#F1F1F3!important;font-style:italic}
.rew-pill{background:transparent!important;border:1px solid var(--line-2)!important;
  box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  color:var(--txt)!important;border-radius:0!important}
.rew-pill:hover{background:rgba(241,241,243,.06)!important;box-shadow:none!important}
.hero::before,.hero::after{display:none!important}
.hero .eyebrow{color:rgba(241,241,243,.78)}
.pd-warn{color:rgba(241,241,243,.75);background:transparent;border:1px solid var(--line-2);border-radius:0}
.pcard.ne-tilt:hover,.pcard.ne-tilt:focus-within{box-shadow:none!important;border-color:var(--line-2)!important}
.store-sel:hover{border-color:var(--line-2)}

/* ---- 7. restore the 12px read-size floor ----
   The earlier accessibility pass set 12px as the minimum for anything a
   customer has to READ (decorative lockups exempt). The uppercase labels
   above had dropped under it; put them back. */
.eyebrow,.kick,.cat-l,.pcard .cat-l,.hero .eyebrow,.hero-points span,
.feat-card .fbadge,.pcard .badge,.rcard .badge,.rail .rcard .rph .badge,
.pcard .ph::after,.rew-pill,.nav-links .nl,.big-ghost,.loc-btn,
.rail .rcard .radd,.feat-card .fcat,.pcard .spec,.loc-note{font-size:12px}
.pcard .cat-l,.feat-card .fcat{letter-spacing:1.8px}
.nav-links .nl{font-size:12.5px}


/* =====================================================================
   TWEAKS — three presets that reshape the whole page. Inert unless the
   panel sets an attribute on <html>, so the default render is untouched.
   ===================================================================== */

/* ---- GROUND: what the store is made of ---- */
html[data-ground="warm"]{
  --ink:#17120E;--panel:#1C1611;--panel-2:#221A14;--panel-3:#2A2019;
  --txt:#F0E9DE;--mut:#B3A896;--mut-2:#8E8271;
  --line:rgba(240,233,222,.13);--line-2:rgba(240,233,222,.21);
  --yellow:#F0E9DE;--yellow-deep:#DDD2C2;--blue:#C6BBA8;--tile:#EFE7DA;
  background:#17120E}
html[data-ground="warm"] .pcard,html[data-ground="warm"] .rail .rcard,
html[data-ground="warm"] .bundle,html[data-ground="warm"] .goal,
html[data-ground="warm"] .review,html[data-ground="warm"] .loc-card,
html[data-ground="warm"] .feat-card{background:#17120E}
html[data-ground="warm"] .aurora{opacity:.35}
html[data-ground="warm"] .big-y,html[data-ground="warm"] .feat-card .fbuy,
html[data-ground="warm"] .news-form button,html[data-ground="warm"] .place-btn,
html[data-ground="warm"] .checkout-btn{background:#F0E9DE;color:#17120E}

html[data-ground="paper"]{
  --ink:#F1EEE8;--panel:#FFFFFF;--panel-2:#F7F5F0;--panel-3:#EFECE5;
  --txt:#14120F;--mut:#5C574F;--mut-2:#6E6860;
  --line:rgba(20,18,15,.13);--line-2:rgba(20,18,15,.22);
  --yellow:#14120F;--yellow-deep:#2A2620;--blue:#5C574F;--tile:#FFFFFF;
  background:#F1EEE8}
html[data-ground="paper"] body{background:#F1EEE8;color:#14120F}
html[data-ground="paper"] .aurora{display:none}
html[data-ground="paper"] nav{background:rgba(241,238,232,.9);border-bottom-color:rgba(20,18,15,.12)}
html[data-ground="paper"] nav.scrolled{background:rgba(241,238,232,.98)}
html[data-ground="paper"] .nav-in .nm,html[data-ground="paper"] .nm .y{color:#14120F!important;-webkit-text-fill-color:#14120F!important}
html[data-ground="paper"] .pcard,html[data-ground="paper"] .rail .rcard,
html[data-ground="paper"] .bundle,html[data-ground="paper"] .goal,
html[data-ground="paper"] .review,html[data-ground="paper"] .loc-card,
html[data-ground="paper"] .feat-card{background:#FFFFFF;border-color:rgba(20,18,15,.13)}
html[data-ground="paper"] .pcard .ph,html[data-ground="paper"] .rail .rcard .rph{border-bottom:1px solid rgba(20,18,15,.08)}
html[data-ground="paper"] .big-y,html[data-ground="paper"] .feat-card .fbuy,
html[data-ground="paper"] .news-form button,html[data-ground="paper"] .place-btn,
html[data-ground="paper"] .checkout-btn,html[data-ground="paper"] .gate-btn{background:#14120F;color:#F5F3EF}
html[data-ground="paper"] .big-y:hover,html[data-ground="paper"] .news-form button:hover{background:#2A2620}
html[data-ground="paper"] .big-ghost,html[data-ground="paper"] .loc-btn,
html[data-ground="paper"] .rail .rcard .radd,html[data-ground="paper"] .rew-pill{color:#14120F!important;border-color:rgba(20,18,15,.22)!important}
html[data-ground="paper"] .feat-card .fbadge,html[data-ground="paper"] .pcard .badge,
html[data-ground="paper"] .rcard .badge,html[data-ground="paper"] .rail .rcard .rph .badge{
  background:#14120F;color:#F5F3EF;border-color:#14120F}
html[data-ground="paper"] .pcard .ph::after{background:rgba(20,18,15,.88);color:#F5F3EF}
html[data-ground="paper"] .hero-copy h1 .y,html[data-ground="paper"] .hero h1 .y,
html[data-ground="paper"] .h2 .y{-webkit-text-fill-color:#F1F1F3!important;color:#F1F1F3!important}
/* the hero is a photograph — it stays dark in every ground */
html[data-ground="paper"] .hero{background:#0B0B0C}
html[data-ground="paper"] .news-in,html[data-ground="paper"] .rewards-in{background:#FFFFFF}
html[data-ground="paper"] footer.foot{background:#14120F;color:#F1EEE8}
html[data-ground="paper"] footer.foot a,html[data-ground="paper"] footer.foot span{color:rgba(241,238,232,.72)}

/* ---- VOICE: who is talking ---- */
html[data-voice="grotesk"] .display,
html[data-voice="grotesk"] .loc-city,
html[data-voice="grotesk"] .nav-in .nm,
html[data-voice="grotesk"] .hero h1,
html[data-voice="grotesk"] .deals-strip .tag,
html[data-voice="grotesk"] .pb-h,
html[data-voice="grotesk"] .foot-mark,
html[data-voice="grotesk"] .gc-amt,
html[data-voice="grotesk"] .bw-name,
html[data-voice="grotesk"] .bt-track span,
html[data-voice="grotesk"] .gm-title,
html[data-voice="grotesk"] .ok-id,
html[data-voice="grotesk"] .dp-price b,
html[data-voice="grotesk"] .pcard .ph .ph-fb,
html[data-voice="grotesk"] .pcard .price,
html[data-voice="grotesk"] .hero-copy h1,
html[data-voice="grotesk"] .feat-card .fprice,
html[data-voice="grotesk"] .stat-i .v,
html[data-voice="grotesk"] .h2,
html[data-voice="grotesk"] .vet-plate b,
html[data-voice="grotesk"] .rail .rcard .rb .rpr,
html[data-voice="grotesk"] .spotlight h3,
html[data-voice="grotesk"] .spotlight .sp-price,
html[data-voice="grotesk"] .bundle .bt,
html[data-voice="grotesk"] .bundle .bprice .now,
html[data-voice="grotesk"] .news-in h3,
html[data-voice="grotesk"] .loc-strip .marquee span,
html[data-voice="grotesk"] .rew-card .rc-pts,
html[data-voice="grotesk"] .rw-mbrand,
html[data-voice="grotesk"] .rw-mtier,
html[data-voice="grotesk"] .rw-mpts,
html[data-voice="grotesk"] .cr-line.total span:last-child,
html[data-voice="grotesk"] .rx-tierlabel,
html[data-voice="grotesk"] .rx-pts,
html[data-voice="grotesk"] .hive-pts,
html[data-voice="grotesk"] .rwm-how-i b,
html[data-voice="grotesk"] .mem-sum b,
html[data-voice="grotesk"] .drawer-h h3,
html[data-voice="grotesk"] .ci .ci-ph span,
html[data-voice="grotesk"] .ci .ci-info .p,
html[data-voice="grotesk"] .sub-row.total b,
html[data-voice="grotesk"] .modal h3,
html[data-voice="grotesk"] .pd-ph span,
html[data-voice="grotesk"] .pd-price .p,
html[data-voice="grotesk"] .admin-bar .t,
html[data-voice="grotesk"] .gate-card h2,
html[data-voice="grotesk"] .stat .v,
html[data-voice="grotesk"] .ov-hello h2,
html[data-voice="grotesk"] .kpi .kval,
html[data-voice="grotesk"] .rankrow .rn,
html[data-voice="grotesk"] .inv-strip .iv,
html[data-voice="grotesk"] .osum .ov,
html[data-voice="grotesk"] .arow .a-ph span,
html[data-voice="grotesk"] .arow .a-pr,
html[data-voice="grotesk"] .order .oid,
html[data-voice="grotesk"] .order .ot,
html[data-voice="grotesk"] .shop-mid h3,
html[data-voice="grotesk"] .ne-stat .v,
html[data-voice="grotesk"] #neBuyBar .bb-name,
html[data-voice="grotesk"] #neBuyBar .bb-price,
html[data-voice="grotesk"] #tab-ops .op-h h3,
html[data-voice="grotesk"] .rs-aud .n,
html[data-voice="grotesk"] .mg-kpi .v,
html[data-voice="grotesk"] .zr-stat .v,
html[data-voice="grotesk"] .zr-row.big b,
html[data-voice="grotesk"] .usual-h b{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;letter-spacing:-.6px;text-transform:none}
html[data-voice="grotesk"] .hero h1,html[data-voice="grotesk"] .hero-copy h1{letter-spacing:-2.4px;font-weight:500}
html[data-voice="stencil"] .display,
html[data-voice="stencil"] .loc-city,
html[data-voice="stencil"] .nav-in .nm,
html[data-voice="stencil"] .hero h1,
html[data-voice="stencil"] .deals-strip .tag,
html[data-voice="stencil"] .pb-h,
html[data-voice="stencil"] .foot-mark,
html[data-voice="stencil"] .gc-amt,
html[data-voice="stencil"] .bw-name,
html[data-voice="stencil"] .bt-track span,
html[data-voice="stencil"] .gm-title,
html[data-voice="stencil"] .ok-id,
html[data-voice="stencil"] .dp-price b,
html[data-voice="stencil"] .pcard .ph .ph-fb,
html[data-voice="stencil"] .pcard .price,
html[data-voice="stencil"] .hero-copy h1,
html[data-voice="stencil"] .feat-card .fprice,
html[data-voice="stencil"] .stat-i .v,
html[data-voice="stencil"] .h2,
html[data-voice="stencil"] .vet-plate b,
html[data-voice="stencil"] .rail .rcard .rb .rpr,
html[data-voice="stencil"] .spotlight h3,
html[data-voice="stencil"] .spotlight .sp-price,
html[data-voice="stencil"] .bundle .bt,
html[data-voice="stencil"] .bundle .bprice .now,
html[data-voice="stencil"] .news-in h3,
html[data-voice="stencil"] .loc-strip .marquee span,
html[data-voice="stencil"] .rew-card .rc-pts,
html[data-voice="stencil"] .rw-mbrand,
html[data-voice="stencil"] .rw-mtier,
html[data-voice="stencil"] .rw-mpts,
html[data-voice="stencil"] .cr-line.total span:last-child,
html[data-voice="stencil"] .rx-tierlabel,
html[data-voice="stencil"] .rx-pts,
html[data-voice="stencil"] .hive-pts,
html[data-voice="stencil"] .rwm-how-i b,
html[data-voice="stencil"] .mem-sum b,
html[data-voice="stencil"] .drawer-h h3,
html[data-voice="stencil"] .ci .ci-ph span,
html[data-voice="stencil"] .ci .ci-info .p,
html[data-voice="stencil"] .sub-row.total b,
html[data-voice="stencil"] .modal h3,
html[data-voice="stencil"] .pd-ph span,
html[data-voice="stencil"] .pd-price .p,
html[data-voice="stencil"] .admin-bar .t,
html[data-voice="stencil"] .gate-card h2,
html[data-voice="stencil"] .stat .v,
html[data-voice="stencil"] .ov-hello h2,
html[data-voice="stencil"] .kpi .kval,
html[data-voice="stencil"] .rankrow .rn,
html[data-voice="stencil"] .inv-strip .iv,
html[data-voice="stencil"] .osum .ov,
html[data-voice="stencil"] .arow .a-ph span,
html[data-voice="stencil"] .arow .a-pr,
html[data-voice="stencil"] .order .oid,
html[data-voice="stencil"] .order .ot,
html[data-voice="stencil"] .shop-mid h3,
html[data-voice="stencil"] .ne-stat .v,
html[data-voice="stencil"] #neBuyBar .bb-name,
html[data-voice="stencil"] #neBuyBar .bb-price,
html[data-voice="stencil"] #tab-ops .op-h h3,
html[data-voice="stencil"] .rs-aud .n,
html[data-voice="stencil"] .mg-kpi .v,
html[data-voice="stencil"] .zr-stat .v,
html[data-voice="stencil"] .zr-row.big b,
html[data-voice="stencil"] .usual-h b{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.5px;font-weight:400}
html[data-voice="stencil"] .hero h1,html[data-voice="stencil"] .hero-copy h1{line-height:.92;letter-spacing:.5px}

/* ---- DENSITY: how much room the shelf gets ---- */
html[data-density="gallery"] .blk{padding:96px 0 22px}
html[data-density="gallery"] .sec-head{margin-bottom:42px}
html[data-density="gallery"] .wrap{max-width:1080px}
html[data-density="gallery"] .pcard .body{padding:22px 22px 4px}
html[data-density="gallery"] .pcard .foot{padding:22px;padding-top:14px}
html[data-density="gallery"] .pcard .ph img{padding:30px!important}
html[data-density="market"] .blk{padding:32px 0 6px}
html[data-density="market"] .sec-head{margin-bottom:14px}
html[data-density="market"] .pcard .body{padding:10px 11px 2px}
html[data-density="market"] .pcard .foot{padding:11px;padding-top:8px}
html[data-density="market"] .pcard .ph img{padding:7px!important}
html[data-density="market"] .pcard .nm-l{font-size:13px}
@media(min-width:981px){
  html[data-density="gallery"] .grid{grid-template-columns:repeat(3,1fr);gap:34px}
  html[data-density="market"] .grid{grid-template-columns:repeat(5,1fr);gap:10px}
}