/* tema-ru.css — spravochnikazino.com
   Tema proprio, scritto per questo sito e volutamente lontano da quello del sito
   gemello: un'altra famiglia di caratteri, un'altra tavolozza, un altro impianto di
   pagina. Il monospaziato non e' decorazione: e' il registro delle prove, cioe' di
   quello che qualcuno ha scritto o promesso, e non va usato per la prosa. */

:root {
  --ink:    #15171A;   /* inchiostro */
  --muted:  #57544F;   /* seconda voce */
  --paper:  #FBF9F6;   /* carta calda */
  --band:   #F2EDE5;   /* fascia */
  --line:   #E0D9CF;   /* filo */
  --signal: #9E5207;   /* ambra: attenzione */
  --proof:  #1B4D7A;   /* blu freddo: verificabile */
  --fraud:  #96191C;   /* rosso: frode, e solo frode */
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --misura: 36rem;
  --t-2xl: clamp(1.78rem, 4.8vw, 2.9rem);
  --t-xl:  clamp(1.42rem, 3.4vw, 1.95rem);
  --t-l:   clamp(1.16rem, 2.2vw, 1.34rem);
  --t-m:   1.0625rem;
  --t-s:   0.95rem;
  --t-xs:  0.84rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:    #EDEAE5;
    --muted:  #A49F97;
    --paper:  #141311;
    --band:   #1D1B18;
    --line:   #332F2A;
    --signal: #E8A24A;
    --proof:  #8FBEE8;
    --fraud:  #E0897C;
  }
}
:root[data-theme="dark"] {
  --ink: #EDEAE5; --muted: #A49F97; --paper: #141311; --band: #1D1B18;
  --line: #332F2A; --signal: #E8A24A; --proof: #8FBEE8; --fraud: #E0897C;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.62;
  font-feature-settings: 'tnum' 0;
  text-rendering: optimizeLegibility;
}

.obolochka { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1rem; }

a { color: var(--proof); text-underline-offset: 0.17em; text-decoration-thickness: 0.07em; }
a:hover { color: var(--ink); }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--t-2xl); margin: 0 0 0.6rem; }
h2 { font-size: var(--t-xl); margin: 2.4rem 0 0.7rem; }
h3 { font-size: var(--t-l); margin: 1.8rem 0 0.5rem; }

/* ----------------------------------------------------------------- testata */

.shapka { border-bottom: 2px solid var(--ink); background: var(--paper); }
.shapka__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 0;
}
.marka { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.marka__znak { width: 2rem; height: 2rem; display: block; border-radius: 0.45rem; }
.marka__nome { font-weight: 600; font-size: var(--t-s); letter-spacing: -0.01em; }
.marka__nome span { color: var(--muted); font-weight: 400; display: block; font-size: var(--t-xs); letter-spacing: 0; }

.navigaciya { border-bottom: 1px solid var(--line); background: var(--band); }
.navigaciya ul {
  list-style: none; margin: 0; padding: 0.45rem 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.3rem;
}
.navigaciya a {
  font-size: var(--t-xs); font-weight: 500; color: var(--ink);
  text-decoration: none; letter-spacing: 0.01em;
}
.navigaciya a:hover, .navigaciya a[aria-current="page"] { color: var(--signal); text-decoration: underline; }

/* ----------------------------------------------------------------- apertura */

.vvod { padding: 2.4rem 0 0.4rem; }
.vvod h1 { max-width: 22ch; }
.vvod__lid {
  font-size: var(--t-l); color: var(--ink); max-width: var(--misura);
  margin: 0.9rem 0 0; line-height: 1.5;
}
.vvod__istochnik {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  margin: 1.1rem 0 0; padding-left: 0.8rem; border-left: 2px solid var(--line);
  max-width: var(--misura); line-height: 1.5;
}

/* --------------------------------------------- anatomia del caso: la firma */

.sluchay {
  display: grid; gap: 0; margin: 2rem 0 0;
  border: 1px solid var(--line); border-radius: 0.5rem; overflow: hidden;
  background: var(--band);
}
.sluchay__blok { padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.sluchay__blok:last-child { border-bottom: 0; }
.sluchay__shapka {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 0.45rem; font-weight: 500;
}
.sluchay__blok--obeshchayut .sluchay__shapka { color: var(--fraud); }
.sluchay__blok--delo      .sluchay__shapka { color: var(--signal); }
.sluchay__blok--zakon     .sluchay__shapka { color: var(--proof); }
.sluchay__blok--delat     .sluchay__shapka { color: var(--ink); }
.sluchay__blok p { margin: 0; max-width: var(--misura); }
.sluchay__blok--delat { background: var(--paper); }
@media (min-width: 52rem) {
  .sluchay { grid-template-columns: 1fr 1fr; }
  .sluchay__blok { border-bottom: 1px solid var(--line); }
  .sluchay__blok:nth-child(odd) { border-right: 1px solid var(--line); }
  .sluchay__blok:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ----------------------------------------------------------------- cifre */

.cifry { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin: 1.8rem 0 0; }
.cifra { max-width: 17rem; }
.cifra__znachenie {
  display: block; font-family: var(--mono); font-weight: 500;
  font-size: clamp(1.6rem, 4.4vw, 2.2rem); line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cifra__podpis { display: block; margin-top: 0.3rem; font-size: var(--t-s); line-height: 1.45; }
.cifra__istochnik { display: block; margin-top: 0.25rem; font-size: var(--t-xs); color: var(--muted); }

/* ----------------------------------------------------------------- sezioni */

.razdel { padding: 1.6rem 0; }
.razdel--fon { background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.ed-article { max-width: var(--misura); }
.ed-article p { margin: 0 0 1.05rem; }
.ed-article h2:first-child { margin-top: 0.6rem; }

/* citazione di norma: non e' prosa dell'autore */
.ed-legal {
  margin: 1.3rem 0; padding: 0.9rem 1rem; background: var(--band);
  border-left: 3px solid var(--proof); border-radius: 0 0.3rem 0.3rem 0;
  max-width: var(--misura);
}
.ed-legal p { margin: 0; font-size: var(--t-s); }
.ed-legal cite { display: block; margin-top: 0.5rem; font-family: var(--mono); font-size: var(--t-xs); font-style: normal; color: var(--muted); }

/* il blocco delle prove: in monospaziato, perche' e' roba scritta da altri */
.dokaz {
  font-family: var(--mono); font-size: var(--t-s); line-height: 1.55;
  margin: 1.3rem 0; padding: 0.9rem 1rem; border: 1px dashed var(--line);
  border-radius: 0.4rem; background: var(--paper); max-width: var(--misura);
}
.dokaz p { margin: 0 0 0.6rem; }
.dokaz p:last-child { margin: 0; }
.dokaz__shapka {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.5rem; font-weight: 500;
}

/* avvertimento: l'unico elemento che si permette l'ambra piena */
.predupr {
  margin: 1.5rem 0; padding: 1rem 1.1rem; border-radius: 0.4rem;
  border: 1px solid var(--signal); background: var(--band); max-width: var(--misura);
}
.predupr p { margin: 0; }
.predupr p + p { margin-top: 0.6rem; }
.predupr__shapka {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--signal); font-weight: 500; margin: 0 0 0.45rem;
}

.ed-nota { font-size: var(--t-s); color: var(--muted); max-width: var(--misura); margin: 1rem 0 0; }

/* ----------------------------------------------------------------- tabelle */

.svod-obertka { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.svod { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.svod caption {
  text-align: left; color: var(--muted); font-size: var(--t-xs);
  line-height: 1.5; margin-bottom: 0.7rem; max-width: var(--misura);
}
.svod th, .svod td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.svod th {
  font-family: var(--mono); font-weight: 500; font-size: var(--t-xs);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--ink);
}
.svod td:first-child { font-weight: 600; }
.svod tbody tr:nth-child(even) { background: var(--band); }

/* ----------------------------------------------------------------- domande */

.ed-faq { max-width: var(--misura); margin-top: 1.4rem; }
.ed-faq details { border-top: 1px solid var(--line); padding: 0.75rem 0; }
.ed-faq details:last-child { border-bottom: 1px solid var(--line); }
.ed-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::before { content: '+'; font-family: var(--mono); color: var(--signal); margin-right: 0.5rem; }
.ed-faq details[open] summary::before { content: '–'; }
.ed-faq details > div { padding-top: 0.5rem; }
.ed-faq p { margin: 0; }

/* ----------------------------------------------------------------- seguito */

.dalshe { border-top: 2px solid var(--ink); margin-top: 3rem; padding-top: 1.4rem; }
.dalshe h2 { margin-top: 0; font-size: var(--t-l); }
.dalshe ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.7rem 2rem;
}
.dalshe li { border-top: 1px solid var(--line); padding-top: 0.55rem; }
.dalshe a { font-weight: 600; font-size: var(--t-s); text-decoration: none; }
.dalshe a:hover { text-decoration: underline; }
.dalshe span { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.45; margin-top: 0.15rem; }

.podpis {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--muted);
  margin-top: 2.2rem; padding-top: 0.8rem; border-top: 1px solid var(--line);
  max-width: var(--misura); line-height: 1.6;
}

/* ----------------------------------------------------------------- piede */

.podval { border-top: 2px solid var(--ink); margin-top: 3rem; padding: 2rem 0 2.6rem; background: var(--band); }
.podval__setka { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.6rem 2.2rem; }
.podval h2 { font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; }
.podval ul { list-style: none; margin: 0; padding: 0; }
.podval li { padding: 0.17rem 0; }
.podval a { color: var(--ink); text-decoration: none; font-size: var(--t-s); }
.podval a:hover { color: var(--signal); text-decoration: underline; }
.podval__otvet { margin-top: 1.9rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); max-width: 54rem; font-size: var(--t-s); }
.podval__otvet p { margin: 0 0 0.7rem; }
.vozrast {
  display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 0.78rem;
  border: 1px solid var(--fraud); color: var(--fraud); border-radius: 0.25rem;
  padding: 0.05rem 0.35rem; margin-right: 0.4rem;
}

/* ----------------------------------------------------------------- consenso */

.soglasie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--paper); border-top: 2px solid var(--ink);
  padding: 1rem 0; box-shadow: 0 -8px 24px rgba(0,0,0,0.09);
}
.soglasie__telo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.soglasie p { margin: 0; font-size: var(--t-s); flex: 1 1 22rem; max-width: 44rem; }
.soglasie__knopki { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.soglasie button {
  font-family: var(--sans); font-size: var(--t-s); font-weight: 600;
  padding: 0.5rem 1.1rem; border-radius: 0.35rem; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
}
.soglasie button:hover { background: var(--ink); color: var(--paper); }

/* ----------------------------------------------------------------- stampa */

@media print {
  .shapka, .navigaciya, .soglasie, .dalshe { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .razdel--fon, .svod tbody tr:nth-child(even) { background: transparent; }
  a { color: #000; }
}

/* =============================================================
   I visivi: SVG dentro la pagina, disegnati da visivi.py.

   Il modulo e' lo stesso dei due siti russi; i colori stanno qui,
   perche' la Content-Security-Policy blocca gli stili in linea e
   perche' cosi' ogni sito disegna nella sua tavolozza e segue da
   se' il modo scuro. Qui il blu freddo e' il colore di cio' che si
   verifica, e le cifre del regolatore sono esattamente questo.
   ============================================================= */

.vis { margin: 1.7rem 0; }
.vis__disegno { display: block; width: 100%; height: auto; overflow: visible; }
.vis__podpis { margin-top: 0.45rem; }

.v-barra { fill: var(--proof); }
.v-fondo { fill: var(--band); }
.v-riga  { fill: var(--band); }
.v-box   { fill: var(--band); stroke: var(--line); stroke-width: 1; }
.v-box--net { fill: var(--band); stroke: var(--fraud); }
.v-box--ok  { fill: var(--band); stroke: var(--proof); }
.v-asse  { stroke: var(--line); stroke-width: 1; }
.v-punto { fill: var(--proof); }
.v-strelka { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.v-testo { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.v-testo--muted { font-size: 12px; fill: var(--muted); }
.v-testo--num { font-family: var(--mono); font-weight: 600; }
.v-cifra { font-family: var(--mono); font-weight: 700; font-size: 36px; fill: var(--proof); }
.v-cifra--net { fill: var(--fraud); }
.v-segno { font-family: var(--sans); font-size: 15px; }

.v-ok     { fill: var(--proof); }
.v-net    { fill: var(--fraud); }
.v-neutro { fill: var(--muted); }

/* Il corpo del testo dentro un disegno sta in unita' del disegno: se lo si
   ingrandisce, si allarga anche, e l'etichetta esce dal riquadro. Percio' qui
   non si tocca, e la leggibilita' sul telefono si ottiene impedendo al disegno
   di rimpicciolirsi oltre la soglia in cui le parole non si leggono piu':
   sotto quella la figura scorre in orizzontale, come le tabelle larghe del
   sito, e la didascalia resta al suo posto. */

.vis__disegno { min-width: 32rem; }

@media (max-width: 36rem) {
  .vis { overflow-x: auto; }
  .vis__podpis { position: sticky; left: 0; max-width: calc(100vw - 2rem); }
}

/* =============================================================
   L'impaginazione: la colonna di lettura al centro, le figure fuori.
   ============================================================= */

.ed-article { margin-inline: auto; }

.vis,
.ed-article > table,
.ed-article > .tabl {
  width: min(52rem, calc(100vw - 2rem));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
}

@media (max-width: 52rem) {
  .vis,
  .ed-article > table,
  .ed-article > .tabl { width: 100%; left: auto; transform: none; }
}

/* Il primo paragrafo qui NON si marca: la pagina ha gia' il sommario sotto il
   titolo e, dove serve, il riquadro «Короче говоря». Due segni che dicono «questo
   e' il punto» si annullano a vicenda, e il filo a sinistra e' il gesto dell'altro
   sito russo: tenerlo su tutti e due li farebbe sembrare lo stesso impianto. */

/* Lo stacco di sezione, nell'idioma di questo tema: un filo sottile per tutta la
   colonna e il titolo appoggiato sopra, come in un testo normativo. Il monospaziato
   e' il registro delle prove e resta ai blocchi che portano prove. */
.ed-article h2 {
  margin-top: 2.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 34rem) {
  .ed-article h2 { margin-top: 1.8rem; }
}


/* =============================================================
   Le figure a barre, fatte di testo.

   Un disegno SVG ha una larghezza propria e si rimpicciolisce
   tutto insieme: sul telefono le parole scendono sotto i sette
   pixel e non si leggono piu'. Una barra non ha bisogno di
   geometria, solo di una proporzione, e qui il testo resta testo:
   va a capo da solo, resta della sua misura a ogni larghezza, e
   chi legge con la voce lo sente come parole e numeri, non come
   un'immagine. La larghezza della barra non puo' stare in uno
   style= (il CSP del sito non ammette stili in linea): sta in una
   classe, gr-w-0 ... gr-w-100, scritte qui sotto una volta sola.
   ============================================================= */

.gr { margin: 0; }
.gr__asse {
  margin: 0 0 0.7rem; font-family: var(--sans); font-size: 0.9rem;
  color: var(--muted); max-width: none;
}
.gr__riga {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  align-items: center; gap: 0 0.8rem; padding: 0.28rem 0;
}
.gr__nome {
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink);
  line-height: 1.35; text-align: right;
}
.gr__pista { background: var(--band); border-radius: 3px; height: 1.25rem; }
.gr__barra {
  display: block; height: 100%; background: var(--accento);
  border-radius: 3px; min-width: 2px;
}
.gr__barra--debole { background: var(--debole); }
.gr__cifra {
  font-family: var(--mono); font-weight: 600; font-size: 0.9rem;
  color: var(--ink); white-space: nowrap;
}

/* La scala delle combinazioni legge dal numero al nome. */
.gr--scala .gr__riga { grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem); }
.gr--scala .gr__nome { order: 3; text-align: left; }
.gr--scala .gr__cifra { order: 1; }
.gr--scala .gr__pista { order: 2; }

/* Sul telefono il nome prende la sua riga: la barra non si stringe
   fino a sparire e nessuna parola finisce fuori schermo. */
@media (max-width: 36rem) {
  .gr__riga { grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.7rem; padding: 0.4rem 0; }
  .gr__nome { grid-column: 1 / -1; text-align: left; }
  .gr--scala .gr__riga { grid-template-columns: auto minmax(0, 1fr); }
  .gr--scala .gr__nome { order: 0; }
  .gr--scala .gr__cifra { order: 1; }
  .gr--scala .gr__pista { order: 2; }
}


.gr { --accento: var(--proof); --debole: var(--line); }

/* la larghezza della barra, una classe per punto percentuale */
.gr-w-0 { width: 0%; }
.gr-w-1 { width: 1%; }
.gr-w-2 { width: 2%; }
.gr-w-3 { width: 3%; }
.gr-w-4 { width: 4%; }
.gr-w-5 { width: 5%; }
.gr-w-6 { width: 6%; }
.gr-w-7 { width: 7%; }
.gr-w-8 { width: 8%; }
.gr-w-9 { width: 9%; }
.gr-w-10 { width: 10%; }
.gr-w-11 { width: 11%; }
.gr-w-12 { width: 12%; }
.gr-w-13 { width: 13%; }
.gr-w-14 { width: 14%; }
.gr-w-15 { width: 15%; }
.gr-w-16 { width: 16%; }
.gr-w-17 { width: 17%; }
.gr-w-18 { width: 18%; }
.gr-w-19 { width: 19%; }
.gr-w-20 { width: 20%; }
.gr-w-21 { width: 21%; }
.gr-w-22 { width: 22%; }
.gr-w-23 { width: 23%; }
.gr-w-24 { width: 24%; }
.gr-w-25 { width: 25%; }
.gr-w-26 { width: 26%; }
.gr-w-27 { width: 27%; }
.gr-w-28 { width: 28%; }
.gr-w-29 { width: 29%; }
.gr-w-30 { width: 30%; }
.gr-w-31 { width: 31%; }
.gr-w-32 { width: 32%; }
.gr-w-33 { width: 33%; }
.gr-w-34 { width: 34%; }
.gr-w-35 { width: 35%; }
.gr-w-36 { width: 36%; }
.gr-w-37 { width: 37%; }
.gr-w-38 { width: 38%; }
.gr-w-39 { width: 39%; }
.gr-w-40 { width: 40%; }
.gr-w-41 { width: 41%; }
.gr-w-42 { width: 42%; }
.gr-w-43 { width: 43%; }
.gr-w-44 { width: 44%; }
.gr-w-45 { width: 45%; }
.gr-w-46 { width: 46%; }
.gr-w-47 { width: 47%; }
.gr-w-48 { width: 48%; }
.gr-w-49 { width: 49%; }
.gr-w-50 { width: 50%; }
.gr-w-51 { width: 51%; }
.gr-w-52 { width: 52%; }
.gr-w-53 { width: 53%; }
.gr-w-54 { width: 54%; }
.gr-w-55 { width: 55%; }
.gr-w-56 { width: 56%; }
.gr-w-57 { width: 57%; }
.gr-w-58 { width: 58%; }
.gr-w-59 { width: 59%; }
.gr-w-60 { width: 60%; }
.gr-w-61 { width: 61%; }
.gr-w-62 { width: 62%; }
.gr-w-63 { width: 63%; }
.gr-w-64 { width: 64%; }
.gr-w-65 { width: 65%; }
.gr-w-66 { width: 66%; }
.gr-w-67 { width: 67%; }
.gr-w-68 { width: 68%; }
.gr-w-69 { width: 69%; }
.gr-w-70 { width: 70%; }
.gr-w-71 { width: 71%; }
.gr-w-72 { width: 72%; }
.gr-w-73 { width: 73%; }
.gr-w-74 { width: 74%; }
.gr-w-75 { width: 75%; }
.gr-w-76 { width: 76%; }
.gr-w-77 { width: 77%; }
.gr-w-78 { width: 78%; }
.gr-w-79 { width: 79%; }
.gr-w-80 { width: 80%; }
.gr-w-81 { width: 81%; }
.gr-w-82 { width: 82%; }
.gr-w-83 { width: 83%; }
.gr-w-84 { width: 84%; }
.gr-w-85 { width: 85%; }
.gr-w-86 { width: 86%; }
.gr-w-87 { width: 87%; }
.gr-w-88 { width: 88%; }
.gr-w-89 { width: 89%; }
.gr-w-90 { width: 90%; }
.gr-w-91 { width: 91%; }
.gr-w-92 { width: 92%; }
.gr-w-93 { width: 93%; }
.gr-w-94 { width: 94%; }
.gr-w-95 { width: 95%; }
.gr-w-96 { width: 96%; }
.gr-w-97 { width: 97%; }
.gr-w-98 { width: 98%; }
.gr-w-99 { width: 99%; }
.gr-w-100 { width: 100%; }