/* ============================================================================
   page.css - shared by acca_page, fm_page, as_page and ca_page (each repo
   carries its own identical copy, same standalone-repo rule as frm_page).
   Built from cfa_page/frontend/page.css: course explorer (level tabs, cards,
   "also available" pills), combos, credentials, class videos. Dropped what
   none of these pages use (course chooser, topper marquee, wall of love).
   Added: faculty grid (.fac-grid) and the page-level combo footnote
   (p.cm-alone, from frm_page). Generic chrome lives in base.css.
   ============================================================================ */

/* ============================ COURSE EXPLORER ============================= */
.explorer{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--pad) 0;position:relative}
.explorer::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(14,42,94,.05) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000 15%,transparent 55%);mask-image:linear-gradient(180deg,#000 15%,transparent 55%)}
.explorer .wrap{position:relative}

/* headline row: heading left, live batch calendar right (no dead space) */
.exp-head{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  padding-bottom:clamp(1.1rem,2vw,1.6rem);
  border-bottom:1px solid var(--line);
}
.eh-title h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-top:.7rem}
.eh-lede{
  font-size:clamp(.95rem,1.15vw,1.05rem);color:var(--t-2);line-height:1.75;
  padding-left:clamp(0rem,1.6vw,1.4rem);
  border-left:2px solid var(--gold);
}

.levels{margin-top:1.6rem;display:flex;gap:clamp(1.3rem,3.6vw,2.9rem);border-bottom:1px solid var(--line-2)}
.level-tab{background:none;border:0;cursor:pointer;text-align:left;padding:0 .2rem .9rem;position:relative;color:var(--t-3);transition:color .25s}
.level-tab small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.22rem}
.level-tab .num{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.25rem);line-height:1}
.level-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.level-tab:hover{color:var(--navy)}
.level-tab[aria-selected="true"]{color:var(--navy)}
.level-tab[aria-selected="true"]::after{transform:scaleX(1)}
.level-tab:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.panel[hidden]{display:none}
.panel-note{margin:1.5rem 0 1.3rem;font-size:.93rem;color:var(--t-2);max-width:64ch}
.panel-note b{color:var(--navy)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .35s,box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(212,160,43,.35)}
.card.gold{background:linear-gradient(180deg,var(--gold-bg) 0%,#fff 55%);border-color:rgba(212,160,43,.40)}
.card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sky-3)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.05)}
.card-img .fmt{position:absolute;left:.7rem;bottom:.7rem;font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(6,15,42,.72);backdrop-filter:blur(6px);padding:.3rem .6rem;border-radius:99px}
.card-img .ribbon{position:absolute;right:.7rem;top:.7rem;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-3);background:linear-gradient(180deg,var(--gold-3),var(--gold));padding:.32rem .65rem;border-radius:99px;box-shadow:0 8px 18px -8px rgba(212,160,43,.9)}
.card-body{padding:1.05rem 1.15rem .5rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card-body h3{font-size:1.13rem;line-height:1.25;color:var(--navy);letter-spacing:-.01em}
.card-body .hook{font-size:.84rem;color:var(--t-2);line-height:1.5}
.card-body .fit{margin-top:.1rem;font-size:.77rem;color:var(--t-3);position:relative;padding-left:1rem;line-height:1.5}
.card-body .fit::before{content:'';position:absolute;left:0;top:.4em;width:7px;height:7px;border-radius:2px;background:var(--gold)}
.card-body .fit b{color:var(--t-2)}
.card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.8rem 1.15rem 1rem;border-top:1px solid var(--line)}
.price{font-size:.66rem;font-weight:600;color:var(--t-3);line-height:1.25}
.price b{display:block;font-size:1.04rem;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.golink{font-size:.79rem;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:.35rem;transition:gap .2s,color .2s}
.card:hover .golink{gap:.6rem;color:var(--gold-deep)}
.card.wide{grid-column:span 2;flex-direction:row}
.card.wide .card-img{aspect-ratio:auto;width:44%;min-height:100%}
.card.wide .card-col{display:flex;flex-direction:column;flex:1}
.also{margin-top:1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.8rem;color:var(--t-3)}
.also .lbl{font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.64rem;margin-right:.35rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.79rem;font-weight:600;color:var(--t-2);background:var(--sky-3);border:1px solid var(--line);border-radius:99px;padding:.48rem .9rem;transition:all .2s}
.pill:hover{background:var(--gold-bg);border-color:rgba(212,160,43,.4);color:var(--gold-deep)}
.pill b{color:var(--gold-deep)}

/* counsellor strip under the course tabs */
.counsel{
  margin-top:2rem;display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;flex-wrap:wrap;
  background:linear-gradient(120deg,var(--gold-bg),#fff 70%);
  border:1px solid rgba(212,160,43,.4);border-radius:var(--r);
  padding:1.3rem 1.5rem;
}
.counsel h3{font-size:1.2rem;color:var(--navy);line-height:1.25}
.counsel p{margin-top:.35rem;font-size:.87rem;color:var(--t-2);max-width:56ch}
.counsel-cta{flex-shrink:0}
.counsel-cta svg{width:17px;height:17px}

/* ============================ COMBOS (CHARTER) ============================ */
.combosec{
  color:#fff;padding:var(--pad) 0;position:relative;overflow:hidden;
  background:
    radial-gradient(60rem 26rem at 100% 0%,rgba(212,160,43,.15),transparent 55%),
    linear-gradient(160deg,var(--navy-2),var(--navy-3));
}
.combosec h2{color:#fff}
.combosec h2 em{color:var(--gold-3)}
.combosec .lede{color:rgba(255,255,255,.75)}
.combo-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.25rem,3vw,2.5rem);align-items:end}
.combo-levels{
  display:inline-flex;gap:.3rem;padding:.3rem;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
}
.cl-tab{
  border:0;cursor:pointer;background:transparent;color:rgba(255,255,255,.7);
  font-size:.82rem;font-weight:700;padding:.55rem 1.05rem;border-radius:99px;
  transition:background .25s,color .25s;white-space:nowrap;
}
.cl-tab:hover{color:#fff}
.cl-tab[aria-selected="true"]{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--navy-3)}
.cl-tab:focus-visible{outline:3px solid var(--gold-3);outline-offset:2px}
.combo-panel[hidden]{display:none}
.combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem;margin-top:2rem}
.combo{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,background .3s;
}
.combo:hover{transform:translateY(-4px);border-color:rgba(212,160,43,.5);background:rgba(255,255,255,.08)}
.combo .cm-img{aspect-ratio:16/8;overflow:hidden}
.combo .cm-img img{width:100%;height:100%;object-fit:cover}
.combo .cm-body{padding:1.05rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.combo h3{font-size:1.2rem;color:#fff;line-height:1.2}
.combo .cm-desc{font-size:.8rem;color:rgba(255,255,255,.65);line-height:1.55}
.combo .cm-rows{margin-top:.5rem;display:grid;gap:.45rem}
.combo .cm-row{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:10px;padding:.6rem .8rem;transition:border-color .2s,background .2s;
}
.combo .cm-row:hover{border-color:var(--gold);background:rgba(212,160,43,.12)}
.combo .cm-row span{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.9)}
.combo .cm-row b{font-size:.88rem;font-weight:800;color:var(--gold-3);white-space:nowrap}
.combo .cm-alone{margin-top:auto;padding-top:.7rem;font-size:.72rem;color:rgba(255,255,255,.55)}
.combo .cm-alone a{color:var(--gold-3);font-weight:700;border-bottom:1px solid rgba(212,160,43,.4)}

/* ========================== CREDENTIALS (SOURCE) ========================== */
.creds-sec{padding:var(--pad) 0;background:var(--sky-3);border-bottom:1px solid var(--line)}
.creds-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.portrait-wrap{position:relative;max-width:400px}
.portrait-wrap img{width:100%}
.cred-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.3rem}
.cred-chips span{
  font-size:.78rem;color:var(--t-2);background:#fff;
  border:1px solid var(--line-2);border-radius:10px;padding:.5rem .8rem;
  transition:border-color .2s,transform .2s;
}
.cred-chips span:hover{border-color:rgba(212,160,43,.55);transform:translateY(-2px)}
.cred-chips b{color:var(--navy);font-weight:800}
/* pull quote */
.sir-quote{
  margin-top:1.3rem;padding-left:1.1rem;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.45;color:var(--navy);letter-spacing:-.01em;
}
.sir-body{margin-top:1.1rem;font-size:.95rem;color:var(--t-2);line-height:1.75;max-width:58ch}
.sir-body b{color:var(--navy);font-weight:700}
/* accreditation row */
.accred{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.accred span{
  font-size:.73rem;font-weight:700;color:var(--navy);
  background:#fff;border:1px solid rgba(212,160,43,.4);border-radius:99px;
  padding:.45rem .9rem;box-shadow:0 8px 20px -16px rgba(14,42,94,.5);
}
.badge-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.7rem}
.badge{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.95rem 1rem;transition:transform .25s,box-shadow .25s,border-color .25s}
.badge:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(212,160,43,.4)}
.badge b{display:block;font-size:.92rem;color:var(--navy);letter-spacing:-.01em}
.badge span{display:block;margin-top:.25rem;font-size:.7rem;color:var(--t-3);line-height:1.45}
.badge .bx{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--gold-bg);border:1px solid rgba(212,160,43,.4);color:var(--gold-deep);font-size:.85rem;margin-bottom:.6rem}
.creds-points{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.creds-points span{font-size:.75rem;font-weight:600;color:var(--t-2);background:#fff;border:1px solid var(--line);border-radius:99px;padding:.42rem .85rem}
.creds-points b{color:var(--gold-deep)}

/* ======================== CLASS VIDEOS ==================================== */
.results{padding:var(--pad) 0;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
.classroom{margin-top:clamp(2.25rem,4vw,3.25rem)}
.classroom-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.classroom-head h3{font-size:clamp(1.25rem,2.1vw,1.6rem);color:var(--navy)}
.classroom-head a{font-size:.83rem;font-weight:700;color:var(--gold-deep);border-bottom:1px solid rgba(212,160,43,.5)}
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.05rem}
.vcard{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:#000;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s;padding:0}
.vcard:hover{transform:translateY(-4px);border-color:rgba(212,160,43,.55);box-shadow:var(--shadow)}
.vcard .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;opacity:.88;transition:opacity .3s,transform .5s}
.vcard:hover .thumb{opacity:1;transform:scale(1.04)}
.vcard .play{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:rgba(212,160,43,.95);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(0,0,0,.6);transition:transform .25s;pointer-events:none}
.vcard:hover .play{transform:translate(-50%,-50%) scale(1.1)}
.vcard .play::after{content:'';border-left:13px solid var(--navy-3);border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.vcard figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.9),transparent);padding:1.7rem .9rem .8rem;font-size:.82rem;font-weight:600;color:#fff;line-height:1.4;text-align:left;pointer-events:none}
.vcard figcaption small{display:block;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-3);margin-bottom:.2rem}
.vcard iframe{aspect-ratio:16/9;width:100%;height:100%;border:0}

/* ============================== RESPONSIVE ================================ */
/* Only rules touching this page's own sections above. Shared components'
   responsive rules live in ../../shared/frontend/base.css instead. */
@media (max-width:1024px){
  .cards,.cards.two{grid-template-columns:1fr 1fr}
  .card.wide{grid-column:span 2;flex-direction:column}
  .card.wide .card-img{width:100%;aspect-ratio:16/9}
  .exp-head{grid-template-columns:1fr;gap:1.1rem;align-items:start}
  .eh-lede{border-left:0;padding-left:0}
  .combo-head{grid-template-columns:1fr;align-items:start}
  .combo-grid{grid-template-columns:1fr}
  .creds-grid{grid-template-columns:1fr}
  .portrait-wrap{margin:0 auto}
  .videos{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .cards,.cards.two{grid-template-columns:1fr}
  .card.wide{grid-column:span 1}
  .levels{gap:1.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
  .levels::-webkit-scrollbar{display:none}
  .videos{grid-template-columns:1fr}
}

/* the page-level "only want X alone" line under the combos (not nested in a
   .combo card, so styled on its own) - from frm_page */
p.cm-alone{font-size:.8rem;color:rgba(255,255,255,.65)}
p.cm-alone a{color:var(--gold-3);font-weight:700;border-bottom:1px solid rgba(212,160,43,.4)}
.combo-grid.two{grid-template-columns:repeat(2,1fr)}
.combo-grid.one{grid-template-columns:minmax(0,1fr);max-width:560px}

/* ============================== FACULTY GRID ============================== */
/* Real faculty from ssei.co.in/api/faculty-members (photos are transparent
   cut-outs, so they sit on the same navy panel the CFA topper cards use). */
.fac-head{margin-top:clamp(2.25rem,4vw,3.25rem);display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fac-head h3{font-size:clamp(1.25rem,2.1vw,1.6rem);color:var(--navy)}
.fac-head p{font-size:.85rem;color:var(--t-3);max-width:52ch}
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.2rem}
.fac{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.fac:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(212,160,43,.4)}
.fac-img{height:180px;background:linear-gradient(170deg,var(--navy) 0%,var(--navy-3) 100%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.fac-img img{height:170px;width:auto;max-width:92%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.fac-body{padding:.9rem 1rem 1.05rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.fac-body b{font-size:.95rem;color:var(--navy);line-height:1.25}
.fac-body .role{font-size:.72rem;font-weight:600;color:var(--gold-deep);line-height:1.4}
.fac-body ul{margin-top:.55rem;display:flex;flex-direction:column;gap:.32rem}
.fac-body li{font-size:.74rem;color:var(--t-2);line-height:1.45;padding-left:.9rem;position:relative}
.fac-body li::before{content:'';position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:2px;background:var(--gold)}
.fac-grid.three{grid-template-columns:repeat(3,1fr)}
.fac-more{margin-top:1rem;font-size:.82rem;color:var(--t-3)}
/* section variant with no founder portrait (ACCA: Sir doesn't teach it) */
.creds-solo .sir-body{max-width:70ch}
.videos.two{grid-template-columns:repeat(2,1fr)}

@media (max-width:1024px){
  .fac-grid,.fac-grid.three{grid-template-columns:repeat(2,1fr)}
  .combo-grid.two{grid-template-columns:1fr}
}
@media (max-width:680px){
  .fac-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .fac-img{height:140px}
  .fac-img img{height:132px}
  .videos.two{grid-template-columns:1fr}
}

/* ======================= PER-COURSE SECTIONS (v2) ========================= */
/* Each page has one section the others don't, so the four pages don't read
   as copies: ACCA the route, FM what you build, AS the modules. CA keeps the
   standard order; its difference is the accent colour and the class videos. */
.route-sec,.build-sec,.mod-sec{padding:var(--pad) 0;background:#fff;border-bottom:1px solid var(--line)}
.route{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:r;position:relative}
.route li{position:relative;padding:1.2rem 1.2rem 1.3rem;border:1px solid var(--line);background:var(--sky-3);display:flex;flex-direction:column;gap:.3rem}
.route li:first-child{border-radius:var(--r) 0 0 var(--r)}
.route li:last-child{border-radius:0 var(--r) var(--r) 0;background:linear-gradient(180deg,var(--gold-bg),#fff)}
.route li + li{border-left:0}
.route li:not(:last-child)::after{content:'';position:absolute;right:-9px;top:1.45rem;width:16px;height:16px;background:inherit;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);z-index:1}
.rt-n{font-family:var(--serif);font-size:1.6rem;color:var(--accent,var(--gold-deep));line-height:1}
.route b{font-size:1rem;color:var(--navy);margin-top:.35rem}
.rt-p{font-size:.74rem;font-weight:700;letter-spacing:.06em;color:var(--gold-deep)}
.route small{font-size:.8rem;color:var(--t-2);line-height:1.5;margin-top:.2rem}

.build-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.bt{border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.2rem;background:linear-gradient(180deg,var(--sky-3),#fff 70%);transition:transform .3s,box-shadow .3s,border-color .3s}
.bt:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(212,160,43,.4)}
.bt-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--navy);color:var(--gold-3);font-size:.78rem;font-weight:800}
.bt b{display:block;margin-top:.7rem;font-size:1rem;color:var(--navy)}
.bt p{margin-top:.35rem;font-size:.84rem;color:var(--t-2);line-height:1.55}

.mod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:stretch}
.mod{border-radius:var(--r);padding:1.2rem;background:linear-gradient(165deg,var(--navy),var(--navy-3));color:#fff;display:flex;flex-direction:column;gap:.45rem}
.mod-c{align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-3);background:linear-gradient(180deg,var(--gold-3),var(--gold));padding:.3rem .65rem;border-radius:99px}
.mod b{font-family:var(--serif);font-size:1.2rem;line-height:1.2;margin-top:.2rem}
.mod ul{margin-top:.3rem;display:flex;flex-direction:column;gap:.35rem}
.mod li{font-size:.8rem;color:rgba(255,255,255,.75);padding-left:.9rem;position:relative;line-height:1.45}
.mod li::before{content:'';position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:2px;background:var(--gold)}

/* Per-course accent: only the hero glow and the hero kicker rule change.
   Gold stays the brand colour for buttons, prices and headings. */
.pg-acca{--accent:#c8343f}
.pg-ca{--accent:#2d8f9a}
.pg-fm{--accent:#2f9e62}
.pg-as{--accent:#d17a3b}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(42rem 26rem at 8% 0%,color-mix(in srgb,var(--accent,transparent) 34%,transparent),transparent 65%)}
.hero .wrap{position:relative;z-index:1}
.hero .kicker.on-dark::before{background:var(--accent,var(--gold))}
.route-sec .kicker::before,.build-sec .kicker::before,.mod-sec .kicker::before{background:var(--accent,var(--gold))}

@media (max-width:1024px){
  .route{grid-template-columns:1fr 1fr;gap:.7rem}
  .route li,.route li:first-child,.route li:last-child{border-radius:var(--r);border-left:1px solid var(--line)}
  .route li::after{display:none}
  .build-grid{grid-template-columns:1fr 1fr}
  .mod-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .route,.build-grid,.mod-grid{grid-template-columns:1fr}
}