/* GIN Pharmacology subject and topic styles. */ /* ================================================================ GIN PHARM — supplement layer (composes the shared mk- kit). Scoped to `.gin-pharm`, which each GIN pharm page init adds to its root, so nothing here can reach another subject that shares `.gin-topic-content`. THE KIT IS THE SOURCE OF TRUTH. shared/micro-kit/micro-kit.css and shared/cards/solid-text-card.css own every layout, card, pill, figure and callout primitive. This file holds ONLY the four pharmacology corrections the kit does not encode — the same four RAR Pharmacology settled on. Nothing else belongs here. Deliberately NOT carried over from modules/rar/pharmacology/pharmacology.css: · the tooltip-clipping block (`overflow: visible` on card containers plus `.cav-term::after { z-index: 200 }`) — obsolete. MicroKit.mount() portals every .cav-term to a position:fixed bubble on and adds .mk-tips-on to suppress the CSS ::after, so nothing can clip a tooltip. · figure top-alignment (`.mk-fig-row { align-items: flex-start }`, `> .mk-fig { margin-top: 0 }`) — the kit already does exactly this. · every per-page interactive helper (blf-, psi-, cap-, lz-, chl-, cl-, fq-, capsel-, compare tables, overlays, selectors) — page-specific, not structural. Reader-facing text here is #111111. No grays, no tints. ================================================================ */ /* Pills are for DRUG NAMES ONLY. A non-drug card title that carries a hover definition renders bold BLACK with a dotted underline, never a coloured pill. (A drug used AS a title keeps its pill via an explicit .mk-pill.) */ .gin-pharm .mk-factor__name .cav-term:not(.mk-pill) { display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: #111111; font-weight: 800; text-decoration: none; border-bottom: 2px dotted rgba(17, 17, 17, 0.55); } .gin-pharm .mk-factor__name .cav-term:not(.mk-pill):hover, .gin-pharm .mk-factor__name .cav-term:not(.mk-pill):focus-visible { border-bottom-color: rgba(17, 17, 17, 0.85); } /* Cards stay colourful WITHOUT pilling their titles: the kit hue becomes a coloured left-border accent instead. */ .gin-pharm .mk-factor[class*="mk-hue-"], .gin-pharm .mk-card[class*="mk-hue-"] { border-left: 4px solid var(--mk-pill-bd, #cbd5e1); } /* Stacked rows ("Term — why"): the leading term must OUTRANK the explanation after the em dash. The kit sets this strong to 14.5px, below the 15px body, which reads as a broken title. */ .gin-pharm .mk-symptoms > li > strong:first-of-type, .gin-pharm .mk-symptoms > li > .cav-term:first-of-type, .gin-pharm .mk-titled-list > li > strong:first-of-type, .gin-pharm .mk-titled-list > li > .cav-term:first-of-type { font-size: 15.75px; font-weight: 800; color: #111111; } /* Toxicity / effect rows run FULL-WIDTH, one per line. micro-kit.js auto-adds .mk-symptoms--2col to any list over 5 rows and clamps it to 620px, which suits Med-Micro's short symptom words. A pharm row is "TERM — why": in a ~290px column every row wraps 3–4 deep while still using half the card. One full-width column fills the card, wraps at most once, and is no taller. */ .gin-pharm .mk-symptoms.mk-symptoms--2col { columns: auto; column-count: 1; column-width: auto; column-rule: none; max-width: none; } .gin-pharm .mk-symptoms > li { margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); } .gin-pharm .mk-symptoms > li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* ================================================================ Comparison table (.gin-cmp) — the ONE primitive the kit does not provide. `shared/micro-kit/micro-kit.css` has no table class, and RAR's comparators are per-page JS components, not a reusable style. Kept minimal and scoped under .gin-pharm. If a second GIN page needs it, promote it to the shared kit rather than copying it. ================================================================ */ .gin-pharm .gin-cmp-wrap { overflow-x: auto; margin: 10px 0 4px; border: 1px solid rgba(15, 23, 42, 0.10); border-radius: 16px; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05); } .gin-pharm .gin-cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; color: #111111; } .gin-pharm .gin-cmp th, .gin-pharm .gin-cmp td { padding: 11px 16px; text-align: left; vertical-align: top; color: #111111; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .gin-pharm .gin-cmp thead th { font-size: 15.75px; font-weight: 800; background: rgba(15, 23, 42, 0.035); border-bottom: 2px solid rgba(15, 23, 42, 0.18); white-space: nowrap; } /* column identity: GU rose, DU blue — same hues as the payoff cards below */ .gin-pharm .gin-cmp th:nth-child(2), .gin-pharm .gin-cmp td:nth-child(2) { background: rgba(229, 72, 77, 0.045); } .gin-pharm .gin-cmp th:nth-child(3), .gin-pharm .gin-cmp td:nth-child(3) { background: rgba(10, 132, 255, 0.045); } .gin-pharm .gin-cmp thead th:nth-child(2) { box-shadow: inset 0 -2px 0 rgba(229, 72, 77, 0.45); } .gin-pharm .gin-cmp thead th:nth-child(3) { box-shadow: inset 0 -2px 0 rgba(10, 132, 255, 0.45); } .gin-pharm .gin-cmp tbody th { font-weight: 800; white-space: nowrap; } .gin-pharm .gin-cmp tbody tr:last-child th, .gin-pharm .gin-cmp tbody tr:last-child td { border-bottom: 0; } /* key discriminators: the rows the payoff copy is built on */ .gin-pharm .gin-cmp tr.gin-cmp__key th, .gin-pharm .gin-cmp tr.gin-cmp__key td { background: rgba(230, 178, 77, 0.13); font-weight: 700; } .gin-pharm .gin-cmp tr.gin-cmp__key th { font-weight: 800; } .gin-pharm .gin-cmp .gin-cmp__star { color: #d33125; margin-right: 6px; font-size: 13px; } /* Figure captions: the shared components paint these grey. Reader-facing text on this page is black. */ .gin-pharm .mk-fig figcaption, .gin-pharm .atl-figure figcaption { color: #111111; } /* Section lead: the sentence under each

starts the section and must read larger than body copy (house style). The kit sets .mk-lead to 15px, the same as .mk-body — RAR works around this with a per-page `-lead` class on every page; scoping it once here does the same job for all of GIN Pharm. / .gin-pharm .mk-lead { font-size: 16.5px; line-height: 1.55; color: #111111; } / Stacked "Term — why" rows: the kit leaves .mk-titled-list body text at a grey; reader-facing body copy here is black. / .gin-pharm .mk-titled-list > li { color: #111111; } / ================================================================ Block rhythm — even breathing room between the labelled blocks that stack inside a .topic-section-card (cards grid, table, figures, callouts, icon rows). The kit gives .mk-group/.hy-callout 16px and everything else 0, which read as uneven cramming. ================================================================ / .gin-pharm .topic-section-card > .mk-grid, .gin-pharm .topic-section-card > .gin-cmp-wrap, .gin-pharm .topic-section-card > .atl-figure, .gin-pharm .topic-section-card > .mk-fig-row, .gin-pharm .topic-section-card > .mk-symptoms, .gin-pharm .topic-section-card > .mk-titled-list, .gin-pharm .topic-section-card > .mk-group, .gin-pharm .topic-section-card > .hy-callout { margin-top: 18px; } .gin-pharm .topic-section-card > .mk-subhead { margin-top: 24px; } .gin-pharm .topic-section-card > .mk-grid + .mk-body { margin-top: 14px; } .gin-pharm .gin-suffix { margin: 10px 0 0; } .gin-pharm .hy-callout > .gin-callout-note { margin: 10px 0 12px; } / §3 parietal interactive figure: a centered band, not edge-to-edge — big enough to hover the regions, ⤢ Zoom for the full-resolution view. / .gin-pharm .gin-hs-fig { max-width: 100%; margin-left: auto; margin-right: auto; } / Air between the big white section cards — they were stacking nearly flush. / .gin-pharm > .topic-section-card + .topic-section-card, .gin-pharm > #gin-pharm-acid-suppression-lock-it-in { margin-top: 28px; } / Figures render FULL SIZE, not the RAR 168px thumbnail default — path-figure.css sizes .atl-figureimg as a small thumb strip, which letterboxed both figures inside their buttons. Here the image fills its figure; ⤢ Zoom still opens the lightbox at native resolution. / .gin-pharm .atl-figure .atl-figurebtn .atl-figureimg { width: 100%; height: auto; / beats path-figure's 168px thumb (extra class for specificity; gin css loads before it) / } / ================================================================ "The Acid Machine" (gam-) — §3 interactive, ported VERBATIM from the approved acid-machine-prototype-v2.html. Values are LOCKED; the only changes are the gam- namespace, .gin-pharm scoping, gam- prefixed custom properties/keyframes (all document-global namespaces), and the reduced-motion block. CSS lives here per the azole-compare pattern. ================================================================ / .gin-pharm .gam { --gam-ink: #111111; --gam-line: #d8d3ca; --gam-paper: #ffffff; --gam-wash: #faf8f5; --gam-hist: #7b3fa0; --gam-ach: #2e7d4f; --gam-gast: #c0392b; --gam-camp: #1f6fb2; --gam-calc: #2e7d4f; --gam-pump: #e08214; --gam-acid: #c0392b; width: 100%; background: var(--gam-paper); border: 1px solid var(--gam-line); border-radius: 14px; padding: 22px; color: var(--gam-ink); } .gin-pharm .gam, .gin-pharm .gam { box-sizing: border-box; } .gin-pharm .gameyebrow { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--gam-ink); opacity: .6; margin: 0 0 4px; } .gin-pharm .gamtitle { font-size: 21px; font-weight: 750; margin: 0 0 6px; } .gin-pharm .gamintro { font-size: 14.5px; line-height: 1.55; margin: 0 0 18px; max-width: 64ch; } .gin-pharm .gamcontrols { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 16px; } .gin-pharm .gamctrl { flex: 1 1 260px; min-width: 240px; } .gin-pharm .gamctrlLabel { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 7px; opacity: .65; } .gin-pharm .gamseg { display: flex; flex-wrap: wrap; gap: 6px; } .gin-pharm .gambtn { appearance: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--gam-ink); background: #fff; border: 1px solid var(--gam-line); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .13s, border-color .13s, transform .08s; } .gin-pharm .gambtn:hover { background: #f3efe9; } .gin-pharm .gambtn:active { transform: translateY(1px); } .gin-pharm .gambtn[aria-pressed="true"] { background: var(--gam-ink); color: #fff; border-color: var(--gam-ink); } .gin-pharm .gambtn:focus-visible { outline: 2px solid var(--gam-camp); outline-offset: 2px; } .gin-pharm .gamstage { border: 1px solid var(--gam-line); border-radius: 11px; background: #fff; padding: 6px 4px 2px; margin-bottom: 8px; } .gin-pharm .gamstage svg { display: block; width: 100%; height: auto; } .gin-pharm .gam-fade { transition: opacity .35s ease; } .gin-pharm .gam-fade--off { opacity: .13; } .gin-pharm .gam-flow { stroke-dasharray: 7 6; animation: gam-dash 1.05s linear infinite; transition: opacity .35s ease; } .gin-pharm .gam-flow--off { opacity: .12; animation: none; } @keyframes gam-dash { to { stroke-dashoffset: -13; } } .gin-pharm .gam-blockX { transition: opacity .28s ease; } .gin-pharm .gam-blockX--hidden { opacity: 0; } .gin-pharm .gam-vesicle { transform-box: fill-box; transform-origin: center; } .gin-pharm .gam-dock { animation: gam-dock 2.6s ease-in-out infinite; } .gin-pharm .gam-dock--off { animation: none; } @keyframes gam-dock { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(22px); } } .gin-pharm .gam-hion { transition: opacity .4s ease; } .gin-pharm .gam-lbl { font-size: 12.5px; font-weight: 650; fill: var(--gam-ink); } .gin-pharm .gam-lbl--sm { font-size: 11px; font-weight: 600; fill: var(--gam-ink); opacity: .75; } .gin-pharm .gam-lbl--tiny { font-size: 9.5px; font-weight: 600; fill: var(--gam-ink); opacity: .7; } .gin-pharm .gamcaption { font-size: 12.5px; font-weight: 600; text-align: center; margin: 0 0 16px; min-height: 18px; color: var(--gam-ink); } .gin-pharm .gamreadout { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; border-top: 1px solid var(--gam-line); padding-top: 16px; } .gin-pharm .gammeters { flex: 1 1 300px; min-width: 270px; } .gin-pharm .gammeterRow { margin-bottom: 13px; } .gin-pharm .gammeterHead { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 650; margin-bottom: 5px; } .gin-pharm .gammeterVal { font-variant-numeric: tabular-nums; font-weight: 750; } .gin-pharm .gambar { height: 11px; background: #efeae3; border-radius: 99px; overflow: hidden; } .gin-pharm .gamfill { height: 100%; border-radius: 99px; width: 0%; transition: width .55s cubic-bezier(.4, 0, .2, 1); } .gin-pharm .gamfill--prod { background: var(--gam-pump); } .gin-pharm .gamfill--lum { background: var(--gam-acid); } .gin-pharm .gammeterNote { font-size: 11.5px; opacity: .72; margin-top: 4px; } .gin-pharm .gamverdict { flex: 1 1 300px; min-width: 270px; background: var(--gam-wash); border: 1px solid var(--gam-line); border-radius: 10px; padding: 13px 15px; } .gin-pharm .gamverdictTitle { font-size: 13px; font-weight: 750; margin: 0 0 6px; } .gin-pharm .gamverdictBody { font-size: 13.5px; line-height: 1.55; margin: 0; } .gin-pharm .gamfoot { font-size: 11.5px; opacity: .62; margin: 14px 0 0; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .gin-pharm .gam-flow, .gin-pharm .gam-dock { animation: none; } } /* Pending figure slot (kit §5): a clean labeled placeholder carrying the exact manifest filename — never a broken . Becomes a real lightbox figure the moment Chris drops the file in. / .gin-pharm .gin-fig-pendingslot { border: 2px dashed rgba(15, 23, 42, 0.22); border-radius: 14px; padding: 26px 20px; text-align: center; font-size: 14px; font-weight: 700; color: #111111; background: rgba(15, 23, 42, 0.02); } .gin-pharm .gin-fig-pendingslot span { display: block; margin-top: 6px; font-weight: 600; font-size: 13px; color: #111111; } / Purple exam-point callout items without a source chip: full-width text (the kit grid otherwise reserves a 104px column for the chip). / .gin-pharm .hy-calloutitem--plain { grid-template-columns: 1fr; } / ============================================================ Choosing a Regimen interactive (window.GinRegimenChooser) Ported from regimen-chooser-prototype-v4.html. Every declared value is the prototype's — colours, sizes, weights, spacing and radii unchanged. Two mechanical deviations, both safety-only: · .cr / .cr* renamed to .grc / .grc* (namespacing); · the prototype's bare :root tokens (--ink, --line, --paper, --wash, --ppi, --bis, --abx, --good, --bad) are re-declared on .grc with a --grc- prefix, so they cannot collide with the app's own --ink / --line tokens. Same values. All rules scoped under .gin-pharm. ============================================================ / .gin-pharm .grc { --grc-ink: #111111; --grc-line: #d8d3ca; --grc-paper: #ffffff; --grc-ppi: #e08214; --grc-bis: #b8860b; --grc-abx: #1f6fb2; --grc-good: #2e7d4f; --grc-bad: #c0392b; width: 100%; background: var(--grc-paper); border: 1px solid var(--grc-line); border-radius: 14px; padding: 20px; color: var(--grc-ink); } .gin-pharm .grctitle { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--grc-ink); } .gin-pharm .grcintro { font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; color: var(--grc-ink); } / section headers — black, bold, unmissable (a specific correction; keep) / .gin-pharm .grch { font-size: 16px; font-weight: 800; color: var(--grc-ink); margin: 0 0 9px; padding-top: 2px; } .gin-pharm .grchRow { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 9px; gap: 12px; } .gin-pharm .grchRow .grch { margin: 0; } .gin-pharm .grcprog { font-size: 15px; font-weight: 800; color: var(--grc-ink); } .gin-pharm .grcdiv { border: none; border-top: 1px solid var(--grc-line); margin: 18px 0 15px; } / ---------- reference ---------- / .gin-pharm .grcrule { display: flex; gap: 9px; align-items: center; font-size: 12.5px; line-height: 1.45; margin: 0 0 10px; color: var(--grc-ink); } .gin-pharm .grcruleDot { width: 10px; height: 10px; border-radius: 50%; background: var(--grc-ppi); flex: none; } .gin-pharm .grcref { display: grid; gap: 5px; } .gin-pharm .grccard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1.5px solid var(--grc-line); border-left-width: 4px; border-radius: 8px; padding: 8px 11px; } .gin-pharm .grccard--bis { border-left-color: var(--grc-bis); } .gin-pharm .grccard--cla { border-left-color: var(--grc-abx); } .gin-pharm .grcacro { font-size: 12px; font-weight: 800; letter-spacing: .07em; background: #f0ece5; border-radius: 5px; padding: 3px 8px; flex: none; } .gin-pharm .grcdrugs { font-size: 12.5px; font-weight: 600; color: var(--grc-ink); } .gin-pharm .grckind { font-size: 11.5px; opacity: .65; margin-left: auto; white-space: nowrap; } / ---------- case ---------- / .gin-pharm .grcstem { font-size: 14px; line-height: 1.5; margin: 0 0 8px; color: var(--grc-ink); } .gin-pharm .grcask { font-size: 13.5px; font-weight: 750; margin: 0 0 11px; color: var(--grc-ink); } .gin-pharm .grcopts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .gin-pharm .grcopt { appearance: none; font: inherit; font-size: 13px; font-weight: 650; color: var(--grc-ink); background: #fff; cursor: pointer; border: 1.5px solid var(--grc-line); border-radius: 999px; padding: 8px 14px; transition: background .13s, border-color .13s; } .gin-pharm .grcopt:hover:not(:disabled) { background: #f5f1eb; } .gin-pharm .grcopt:focus-visible { outline: 2px solid var(--grc-abx); outline-offset: 2px; } .gin-pharm .grcopt[aria-pressed="true"] { background: var(--grc-ink); color: #fff; border-color: var(--grc-ink); } .gin-pharm .grcopt:disabled { cursor: default; } .gin-pharm .grcopt--hit { background: #eef6f1; border-color: var(--grc-good); color: var(--grc-ink); } .gin-pharm .grcopt--miss { background: #fbeeec; border-color: var(--grc-bad); color: var(--grc-ink); } .gin-pharm .grcbtn { appearance: none; font: inherit; font-size: 13px; font-weight: 750; background: var(--grc-ink); color: #fff; border: none; border-radius: 999px; padding: 9px 18px; cursor: pointer; } .gin-pharm .grcbtn--ghost { background: none; color: var(--grc-ink); border: 1.5px solid var(--grc-line); } .gin-pharm .grcfbHead { font-size: 14px; font-weight: 800; margin: 14px 0 8px; color: var(--grc-ink); } .gin-pharm .grcrow { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; font-size: 12.5px; line-height: 1.45; color: var(--grc-ink); } .gin-pharm .grcmark { flex: none; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: #fff; margin-top: 1px; } .gin-pharm .grcmark--in { background: var(--grc-good); } .gin-pharm .grcmark--out { background: #b9b1a4; } .gin-pharm .grcrowKey { font-weight: 800; } .gin-pharm .grcnote { font-size: 12.5px; line-height: 1.5; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--grc-line); color: var(--grc-ink); } .gin-pharm .grctag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1.5px solid var(--grc-line); border-radius: 4px; padding: 1px 5px; margin-right: 5px; vertical-align: 1px; } .gin-pharm .grc [hidden] { display: none !important; } / ---- Choosing a Regimen: two-column layout ---------------------------- Chris's correction: the widget was a narrow centred strip inside a full-width card, so it left big empty gutters AND repeated, vertically, the same five regimens already tabled directly above it. The reference column now sits BESIDE the case instead of above it, which fills the card and roughly halves the widget's height. One column under 900px. / .gin-pharm .grcgrid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 900px) { .gin-pharm .grcgrid { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); gap: 26px; align-items: start; } / a light rule between the two columns, in place of the old
/ .gin-pharm .grccol--case { border-left: 1px solid var(--grc-line); padding-left: 26px; } } .gin-pharm .grccol { min-width: 0; } / ---- Acid machine: fill the card, but cap the stage -------------------- The widget shell now spans the card (so the controls lay out in one row instead of wrapping), but the stage SVG is viewBox 790x360 — a 2.19:1 band — so letting IT span 1300px pushed the widget past 1000px tall, taller than a laptop screen. Capping the stage keeps the whole widget inside one screen while the controls still use the width. / .gin-pharm .gamstage { max-width: 860px; margin-left: auto; margin-right: auto; } / ---- Figures: never taller than the screen ---------------------------- Now that figures span the card, a tall source image (the mucosal-defense barrier is 1586x992) would render ~830px tall on a 900px viewport and eat a whole screen. Cap the height and let width shrink to match, so the figure stays a figure instead of becoming the page. Aspect is preserved. / .gin-pharm figure.atl-figure .atl-figureimg { max-height: 62vh; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; display: block; } / ---- GERD ladder: a step reads as a STEP ------------------------------ Chris's correction: the step sections were labelled with the small grey `.section-label` eyebrow, so a four-rung treatment ladder read as four ordinary cards. Each step now collapses (the shared .seccol pattern, same as every drug-class section) and carries a big, bold, numbered label. Scoped to .gin-pharm — the shared section-collapse component is untouched, and `.section-label` keeps its normal look everywhere else. / .gin-pharm .gin-step { grid-column: 1; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: .01em; color: var(--text, #111111); } .gin-pharm .gin-stepn { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 50%; background: var(--text, #111111); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; flex: none; } / the step title itself sits under the label, same scale as other section h3s / .gin-pharm .seccolsum > .gin-step + h3 { grid-column: 1; margin: 0; } / ================================================================ Wide inline-SVG figures on narrow screens (.mk-fig--band) A 700-720 wide diagram scaled into a 375px phone renders its 12-14px labels at ~6px — unreadable. Below the breakpoint the band figure becomes a horizontal scroller and the SVG keeps a legible minimum width instead of shrinking without limit. Desktop is untouched. This belongs in shared/micro-kit/micro-kit.css alongside .mk-fig--band itself, since every module with a wide figure has the same problem — promote it there rather than copying this block. It is scoped under .gin-pharm for now only because the kit file is being edited elsewhere. ================================================================ */ @media (max-width: 700px) { .gin-pharm figure.mk-fig--band { overflow-x: auto; -webkit-overflow-scrolling: touch; } .gin-pharm figure.mk-fig--band > svg { min-width: 660px; } }