/* ============================================================
lesson.css - Shared stylesheet for Show Me The Physics lesson
content pages (Newton's Laws, gravity, friction, momentum, etc).
Load this AFTER styles.css:
styles.css = site chrome (headers, footers, nav cards, buttons)
lesson.css = lesson body content + classroom/smartboard sizing
============================================================ */
/* ---- Classroom / smartboard mode: scale all rem-based type site-wide ---- */
html { font-size: 26px; }
body { line-height: 1.65; }
/* Restore the classic showmethephysics.com typeface on lesson pages
(overrides styles.css's body { font-family: 'Inter', ... } -- lesson.css
loads after styles.css, and Verdana is listed first so it wins outright). */
body { font-family: Verdana, Geneva, Tahoma, sans-serif; }
/* ---- Page framing: white "paper" card with a blue margin, like the
classic showmethephysics.com look ---- */
body { background: var(--blue-200); padding: 1.5rem .5rem; }
@media (min-width: 768px) { body { padding: 2rem 1.25rem; } }
@media (min-width: 1100px) { body { padding: 2rem 2.5rem; } }
@media (min-width: 1500px) { body { padding: 2rem 3.75rem; } }
.paper-frame {
max-width: 1400px; margin: 0 auto; background: #fff; border-radius: 1rem;
overflow: hidden; box-shadow: 0 25px 50px -12px rgba(15,23,42,.35), 0 10px 15px -3px rgba(15,23,42,.15);
}
@media (min-width: 768px) { .paper-frame { border-radius: 1.25rem; } }
/* Tone down the homepage footer size (1.875-2.25rem in styles.css) for a copyright line */
.dyn-footer { font-size: 1.05rem; }
/* ---- Lesson header extras ---- */
.eyebrow {
display: block; text-transform: uppercase; letter-spacing: .1em; font-size: 1.05rem;
font-weight: 700; color: var(--blue-100, #dbeafe); opacity: .95; margin-bottom: .5rem;
}
.crumb-row {
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
gap: 1rem; margin: 2rem 0;
}
.crumb-row .classic-link { font-weight: 700; }
/* ---- Top nav row: 3 uniform buttons (previous lesson / all lessons / next lesson) ---- */
.lesson-topnav { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 2rem 0; }
@media (min-width: 600px) { .lesson-topnav { grid-template-columns: 1fr 1fr 1fr; } }
.lesson-topnav .plot-quick-btn { text-align: center; }
.lesson-topnav .plot-quick-btn.disabled {
background: var(--gray-50); color: var(--gray-400, #9ca3af); box-shadow: none;
cursor: default; pointer-events: none; opacity: .6;
}
.lesson-topnav .plot-quick-btn.disabled:hover { transform: none; }
/* Soft, high-contrast navigation buttons at the end of each lesson. */
.lesson-bottomnav .plot-quick-btn {
background: #E4E9FF;
color: #24345F;
border: 2px solid #BBC6EF;
box-shadow: 0 6px 16px rgba(66, 84, 145, .14);
}
.lesson-bottomnav .plot-quick-btn:visited { color: #24345F; }
.lesson-bottomnav .plot-quick-btn:hover,
.lesson-bottomnav .plot-quick-btn:focus-visible {
background: #CFD8FA;
color: #182544;
border-color: #9EAFE6;
}
/* Custom colors for the 3 uniform topnav buttons */
/* 1st button (Previous Lesson) */
.lesson-topnav > *:nth-child(1) {
background-color: #f6ecd8 !important;
color: #5c3d1e !important;
}
/* 2nd button (All Lessons) */
.lesson-topnav > *:nth-child(2) {
background-color: #efeefa !important;
color: #433676 !important;
}
/* 3rd button (Next Lesson) */
.lesson-topnav > *:nth-child(3) {
background-color: #e7f5eb !important;
color: #235841 !important;
}
/* ---- Header image: a banner-style image placed directly under the top
nav row (e.g. the recurring "Do Now" warm-up graphic) -- same position
on every lesson page, ahead of the lede and all lesson content. ---- */
.header-image { text-align: center; margin: 0 0 2rem; }
.header-image img { width: 100%; max-width: 100%; height: auto; border-radius: .75rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.lesson-lede {
max-width: 44rem; margin: 0 auto 2.5rem; text-align: center;
font-size: clamp(1.375rem, 3.5vw, 1.75rem); font-weight: 700; color: var(--gray-800); line-height: 1.4;
}
.lesson-lede .notes-link {
display: block; margin-top: .75rem; font-size: 1.15rem; font-weight: 700; color: #1d4ed8;
}
.lesson-lede .notes-link:hover { text-decoration: underline; }
/* ---- Warm-up / discussion prompt callout ---- */
.prompt-box {
background: #fff; border: 1px solid var(--gray-100); border-radius: 1rem; padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,.05); display: flex; flex-direction: column; align-items: center;
gap: 1rem; text-align: center; max-width: 44rem; margin: 0 auto 1.5rem;
}
.prompt-box img { width: 100%; max-width: 260px; height: auto; }
.prompt-box p { margin: 0; font-size: 2.0rem; font-weight: 700; color: var(--gray-800); }
/* ---- Reveal gap: forces a bit of scrolling between a question and its
answer, so the teacher can ask the class before the answer appears ---- */
.reveal-gap {
min-height: 42vh; display: flex; align-items: center; justify-content: center;
}
.reveal-gap span {
font-size: 2rem; color: var(--gray-200, #e5e7eb); line-height: 1; user-select: none;
}
/* ---- Responsive embed wrapper (use inline style="aspect-ratio: W/H" per embed) ----
Default (black background) is for video embeds -- black letterbox bars are the
normal convention there. ---- */
.embed-frame {
/* Sized for classroom/smartboard legibility: scaled to 90% of the full
paper-frame breakout width (still much larger than the text column),
centered with auto margins so it stays proportional at every screen size. */
position: relative; width: calc((100% + 2rem) * 0.9); margin: 1.5rem auto; border-radius: .75rem;
overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); background: #000;
}
.embed-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
/* ---- .sim-embed: local/interactive HTML5 physics simulations (Swiffy,
Saola, Construct exports, PhET, etc). These render on a white stage and
don't need -- or want -- a black video-style letterbox, so swap the
frame's fill to white to avoid a stray black bar/bottom band when the
simulation's native size doesn't perfectly fill the frame. ---- */
.embed-frame.sim-embed { background: #fff; }
/* Large responsive canvas used by the pulse reflection/transmission lesson. */
.embed-frame.pulse-reflection-embed {
width: min(calc(100% + 2rem), 1280px);
}
/* ---- Fixed-stage HTML5 animations ----
Several older Swiffy/HTML5 exports draw into a fixed-pixel stage. If their
iframe is stretched to the full lesson width, the stage stays pinned to the
iframe's left edge and leaves a large blank area on the right. Size these
frames to their native stage, center them, and restore the native aspect
ratio. Responsive simulations and video embeds are intentionally excluded. */
html body iframe[src$="stringWave5.htm"] {
max-width: 871px !important; aspect-ratio: 871 / 196 !important;
}
html body iframe[src$="pulseRefTransmit5.htm"] {
max-width: 959px !important; aspect-ratio: 959 / 282 !important;
}
html body iframe[src$="waveInvert25.htm"] {
max-width: 961px !important; aspect-ratio: 961 / 241 !important;
}
html body iframe[src$="wavesVibration5.htm"] {
display: block !important; width: 100% !important; max-width: 1211px !important;
height: 200px !important; min-height: 200px !important;
margin: 1.5rem auto !important; aspect-ratio: auto !important;
}
html body iframe[src$="transverse5.htm"] {
max-width: 649px !important; aspect-ratio: 649 / 239 !important;
}
html body iframe[src$="longWave5.htm"] {
max-width: 920px !important; aspect-ratio: 920 / 675 !important;
}
html body iframe[src$="phaseTransverse5.htm"] {
max-width: 870px !important; aspect-ratio: 870 / 475 !important;
}
html body iframe[src$="destructInt5.htm"] {
max-width: 820px !important; aspect-ratio: 820 / 210 !important;
}
html body iframe[src$="destructIntNotEqual5.htm"] {
max-width: 790px !important; aspect-ratio: 790 / 364 !important;
}
html body iframe[src$="diffractionSlitD5.htm"] {
max-width: 803px !important; aspect-ratio: 803 / 537 !important;
}
html body iframe[src$="massFreeFall5.htm"] {
max-width: 714px !important; aspect-ratio: 714 / 560 !important;
}
html body iframe[src$="stringWave5.htm"],
html body iframe[src$="pulseRefTransmit5.htm"],
html body iframe[src$="waveInvert25.htm"],
html body iframe[src$="transverse5.htm"],
html body iframe[src$="longWave5.htm"],
html body iframe[src$="phaseTransverse5.htm"],
html body iframe[src$="destructInt5.htm"],
html body iframe[src$="destructIntNotEqual5.htm"],
html body iframe[src$="diffractionSlitD5.htm"],
html body iframe[src$="massFreeFall5.htm"] {
display: block !important; width: 100% !important; height: auto !important;
min-height: 0 !important; margin: 1.5rem auto !important;
}
/* Hand-redesigned pages wrap simulations in .sim-embed. Shrink the wrapper
with the iframe so the white card and its shadow are centered as one unit. */
.embed-frame.sim-embed:has(> iframe[src$="stringWave5.htm"]) {
width: min(calc(100% - 1rem), 871px) !important; aspect-ratio: 871 / 196 !important;
}
.embed-frame.sim-embed:has(> iframe[src$="pulseRefTransmit5.htm"]) {
width: min(calc(100% - 1rem), 959px) !important; aspect-ratio: 959 / 282 !important;
}
.embed-frame.sim-embed:has(> iframe[src$="waveInvert25.htm"]) {
width: min(calc(100% - 1rem), 961px) !important; aspect-ratio: 961 / 241 !important;
}
.embed-frame.sim-embed:has(> iframe[src$="wavesVibration5.htm"]) {
width: min(calc(100% - 1rem), 1211px) !important; height: 200px !important;
aspect-ratio: auto !important;
}
/* Transverse Waves uses the original 1041 x 214 presentation size. */
html body iframe#I1[src$="wavesVibration5.htm"] {
width: min(100%, 1041px) !important; height: 214px !important;
min-height: 214px !important; margin: 1.5rem auto !important;
}
/* Pulses and Periodic Waves uses the original fixed-stage presentation sizes. */
html body iframe#I1[src$="pulseRefTransmit5.htm"] {
width: min(100%, 964px) !important; height: 296px !important;
min-height: 296px !important; margin: 1.5rem auto !important;
}
html body iframe#I2[src$="waveInvert25.htm"] {
width: min(100%, 972px) !important; height: 250px !important;
min-height: 250px !important; margin: 1.5rem auto !important;
}
html body iframe#I3[src$="stringWave5.htm"] {
width: min(100%, 878px) !important; height: 205px !important;
min-height: 205px !important; margin: 1.5rem auto !important;
}
.embed-frame.sim-embed:has(> iframe[src$="transverse5.htm"]) {
width: min(calc(100% - 1rem), 649px) !important; aspect-ratio: 649 / 239 !important;
}
.embed-frame.sim-embed:has(> iframe[src$="longWave5.htm"]) {
width: min(calc(100% - 1rem), 920px) !important; aspect-ratio: 920 / 675 !important;
}
.embed-frame.sim-embed:has(> iframe[src$="massFreeFall5.htm"]) {
width: min(calc(100% - 1rem), 714px) !important;
aspect-ratio: 714 / 560 !important;
}
audio { width: 100%; max-width: 420px; display: block; margin: 1rem auto 0; }
/* ---- Big centered "reveal" statements (replaces the old giant Verdana slide-stacks) ---- */
.statement-slide { text-align: center; padding: 2.5rem 1rem; }
.statement-slide .big {
font-size: clamp(1.5rem, 4.5vw, 2.75rem); font-weight: 800; color: var(--gray-800);
line-height: 1.3; margin: 0;
}
.statement-slide .big.accent { color: var(--brand-blue); }
/* Fallback for .big / .big.accent used outside a .statement-slide wrapper
(e.g. an equation line inside a .compare-card) -- same treatment. */
.big { font-size: clamp(1.5rem, 4.5vw, 2.75rem); font-weight: 800; color: var(--gray-800);
line-height: 1.3; margin: 0 0 .5rem; text-align: center; }
.big.accent { color: var(--brand-blue); }
.statement-slide .small-lead { font-size: 2.0rem; font-weight: 700;
color: var(--gray-700); margin: 0 0 .75rem; }
/* Note: no text-transform:uppercase here -- this line renders worked-example
equations (Vi, t, d, a, etc). Physics notation is case-sensitive, so
force-uppercasing it silently turned "t" into "T", "d" into "D", etc. */
/* ---- Two-up comparison cards (balanced/unbalanced, at-rest/in-motion, etc.) ---- */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 700px) { .compare-grid { grid-template-columns: 1fr 1fr; } }
.compare-card { background: #fff; border: 1px solid var(--gray-100); border-radius: .75rem;
padding: 1.75rem 1.25rem; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,.05); }
.compare-card h3 { margin: 0 0 1rem; font-size: 1.4rem; color: var(--gray-800); font-weight: 700; }
.compare-card img { width: 100%; max-width: 100%; height: auto; }
.compare-card p { margin: 0 0 .75rem; font-size: 1.3rem; line-height: 1.5; color: var(--gray-700); }
.compare-card p:last-child { margin-bottom: 0; }
.guidelines-box p { margin: 0 0 .75rem; font-size: 2.0rem; line-height: 1.5; color: var(--gray-800); }
.guidelines-box p:last-child { margin-bottom: 0; }
/* ---- Single labeled image ---- */
.media-figure { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 2rem auto; max-width: 760px; }
.media-figure img { width: 100%; max-width: 100%; height: auto; border-radius: .5rem; box-shadow: 0 4px 6px rgba(0,0,0,.07); }
.media-figure figcaption { margin-top: .75rem; font-size: 1.0rem; color: var(--gray-700); font-weight: 600; }
/* ---- "Try it" practice-question callout ---- */
.practice-box { border: 2px dashed var(--brand-blue); border-radius: 1rem; padding: 1.75rem;
margin: 2rem 0; background: var(--blue-50); text-align: left; }
.practice-box .label { font-weight: 800; color: #1d4ed8; text-transform: uppercase;
letter-spacing: .06em; font-size: 2.2em; display: block; margin-bottom: .75rem; }
.practice-box img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border-radius: .5rem; }
.practice-box p { margin: 0; font-size: 2.0rem; line-height: 1.5; color: var(--gray-800); }
.practice-box p:last-child { margin-bottom: 0; }
/* ---- Story / historical-example card (image + narrative text) ---- */
.story-card { display: grid; grid-template-columns: 1fr; gap: 1.5rem; background: #fff;
border: 1px solid var(--gray-100); border-radius: 1rem; padding: 1.5rem; margin: 1.5rem 0;
box-shadow: 0 4px 6px rgba(0,0,0,.05); align-items: center; }
@media (min-width: 700px) { .story-card { grid-template-columns: 200px 1fr; } }
.story-card img { width: 100%; border-radius: .5rem; }
.story-card p { margin: 0 0 .75rem; color: var(--gray-700); font-size: 1.15rem; line-height: 1.6; }
.story-card p:last-child { margin-bottom: 0; }
/* ---- Row of related simulation/lesson links (reuses .dyn-card from styles.css) ---- */
.related-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0 2.5rem; }
@media (min-width: 700px) { .related-row { grid-template-columns: repeat(3, 1fr); } }
/* ---- Section heading pair ---- */
.h2-title { font-size: 2.35rem; font-weight: 800; color: var(--gray-800); text-align: center;
letter-spacing: -0.02em; margin: 0 0 .5rem; }
.h2-sub { text-align: center; color: var(--gray-700); margin: 0 0 2rem; font-size: 1.45rem; font-weight: 600; }
/* ---- Base body-text sizing for plain paragraphs inside a lesson section
(worked-solution/derivation steps, explanatory lines, etc.) that aren't
wrapped in one of the more specific component boxes above. Without this,
bare
tags silently fall back to the live site's small default size --
the same bug found in .practice-box/.compare-card, just unscoped. More
specific rules (.prompt-box p, .compare-card p, .statement-slide .big,
etc.) still win via specificity, so this only fills the gap. ---- */
.content-section p { font-size: 1.3rem; line-height: 1.6; color: var(--gray-800); }
/* ---- Plain content tables: default style for reference/lookup tables
(already-filled data, read-only) -- subdued, matches the site palette. ---- */
table {
width: 100%;
max-width: 640px;
margin: 2rem auto;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--gray-100);
border-radius: .75rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,.05);
font-size: 1.2rem;
}
table th,
table td {
padding: 1.1rem 1.5rem;
line-height: 1.6;
font-size: 1.2rem;
text-align: center;
color: var(--gray-800);
border-bottom: 1px solid var(--gray-100);
}
table th {
background: var(--blue-50);
font-weight: 800;
color: var(--gray-800);
font-size: 1.25rem;
}
table tr:last-child td { border-bottom: none; }
table td font, table th font,
table td span, table th span { font-size: inherit !important; }
/* Range of Possible Resultants: enlarge its answer table to 80% of the
lesson content width without changing tables on the other lesson pages. */
body:has(iframe[src$="AngleResultants5.htm"]) .content-section > table {
width: 80%;
max-width: none;
}
/* ---- .worksheet-table: reserve this for tables meant to be worked
through live in class -- proportionality tables, given/unknown data
tables, anything with blank cells, algebra placeholders (x, y, 2x),
or "?" unknowns. Big, bold, and high-contrast so it reads from the
back of the room -- pair with a .reveal-gap right after the table to
hide a filled-in answer version further down the page. ---- */
table.worksheet-table {
max-width: 900px;
border: 4px solid #2f6a1f;
border-radius: .5rem;
box-shadow: 0 10px 15px -3px rgba(0,0,0,.15);
font-size: 2rem;
}
table.worksheet-table th,
table.worksheet-table td {
border: 3px solid #2f6a1f;
padding: 1.75rem 1.5rem;
line-height: 1.3;
font-size: 2rem;
font-weight: 800;
color: var(--gray-900, #111827);
}
table.worksheet-table th {
background: #8ee66c;
font-size: 2.25rem;
}
table.worksheet-table th sub, table.worksheet-table th sup,
table.worksheet-table td sub, table.worksheet-table td sup { font-size: .55em; }
table.worksheet-table td font, table.worksheet-table th font,
table.worksheet-table td span, table.worksheet-table th span { font-weight: inherit !important; }
/* ---- .worksheet-table.compact: opt-in modifier for wide worksheet tables
(many columns -- e.g. a 6-7 point ranking task) where the default
worksheet-table font size makes the table too wide/cramped. Add the
"compact" class alongside "worksheet-table" on just that
--
this does not change the default worksheet-table styling used
elsewhere. ---- */
table.worksheet-table.compact { font-size: 1.15rem; }
table.worksheet-table.compact th,
table.worksheet-table.compact td { font-size: 1.15rem; padding: .9rem .75rem; }
table.worksheet-table.compact th { font-size: 1.3rem; }
/* ---- Reveal rows: some of the original worksheet tables used per-column
vertical alignment (the "given" values pinned to the top of a tall row,
the answer/result value sitting low in the same row) so a teacher can
show the given values on the smartboard, then scroll a touch to reveal
the answer. Restore that here with classes instead of inline styles --
apply .reveal-row to the
, .wt-answer to the delayed cell, and
.wt-given to the immediately-visible cell(s). Only use this on rows that
actually had this pattern in the original source. ---- */
table.worksheet-table tr.reveal-row td,
table.worksheet-table tr.reveal-row th { height: 11rem; }
table.worksheet-table td.wt-answer,
table.worksheet-table th.wt-answer { vertical-align: bottom; }
table.worksheet-table td.wt-given,
table.worksheet-table th.wt-given { vertical-align: top; }
/* Row-height tiers -- the original markup didn't use one uniform row
height, it varied per row (fewer/more blank-line pairs, or an
explicit shorter/taller pixel height on that row's cells). .reveal-row
alone is the "medium" default above; apply .wt-short/.wt-tall on top of
it to reproduce a row the original made noticeably shorter/taller than
its neighbors, so the amount of scroll-to-reveal per row still tracks
the source instead of forcing every row to the same height. */
table.worksheet-table tr.reveal-row.wt-short td,
table.worksheet-table tr.reveal-row.wt-short th { height: 9rem; }
table.worksheet-table tr.reveal-row.wt-tall td,
table.worksheet-table tr.reveal-row.wt-tall th { height: 13rem; }
/* ---- End-of-lesson call to action ---- */
.final-cta { text-align: center; padding: 3rem 1rem; }
/* Lesson "next page" pill: smaller and terser than the homepage's big CTA pill */
.all-lessons-pill { font-size: 1rem; padding: .5rem 1.25rem; }
.final-cta img { width: 100%; max-width: 350px; height: auto; margin-bottom: 1.5rem; }
/* Preserve every lesson GIF at its intrinsic dimensions. This overrides old
width attributes, inline max-width limits, and responsive image shrinking. */
img[src$=".gif" i] {
width: auto !important; max-width: none !important; height: auto !important;
}
/* Keep native GIF dimensions on larger displays, but prevent wide lesson
graphics from overflowing the viewport on phones and small tablets. */
@media (max-width: 767px) {
img[src$=".gif" i] {
max-width: 100% !important;
}
}
/* Smartboard-readable legacy note text. Original page-specific typography is
restored in each legacy lesson; these are shared fallbacks for common note
classes. Captions, credits, and deliberately small text stay compact. */
html body .legacy-content {
font-size: 1.4rem;
line-height: 1.5;
}
html body .legacy-content .medText {
font-size: clamp(1.75rem, 3vw, 35pt) !important;
line-height: 1.5 !important;
}
html body .legacy-content .BigBold {
font-size: clamp(1.9rem, 3.5vw, 40pt) !important;
line-height: 1.45 !important;
}
html body .legacy-content .VeryLarge {
font-size: clamp(2.4rem, 5vw, 59pt) !important;
line-height: 1.35 !important;
}
html body .legacy-content [class~="20Font"],
html body .legacy-content .italics {
font-size: clamp(1.5rem, 2vw, 20pt) !important;
}
html body .legacy-content .animation,
html body .legacy-content .didYouKnow,
html body .legacy-content .font20 {
font-size: clamp(1.75rem, 3vw, 30pt) !important;
}
html body .legacy-content .hiLite30 {
font-size: clamp(1.85rem, 3.5vw, 35pt) !important;
text-decoration: underline;
}
html body .legacy-content .Mobile {
font-size: clamp(2.25rem, 5vw, 60px) !important;
}
html body .legacy-content .WAHeaders {
font-size: clamp(1.75rem, 3vw, 2.4rem) !important;
font-weight: 800;
text-decoration: underline;
}
html body .legacy-content .caption.caption,
html body .legacy-content .smallFont.smallFont,
html body .legacy-content .FontSmall12.FontSmall12,
html body .legacy-content .smallText.smallText {
font-size: 1rem !important;
line-height: 1.5 !important;
}
html body .legacy-content .caption.caption {
font-size: 1.8rem !important;
line-height: 1.5 !important;
}
/* Worked and student-facing classroom problems must be readable from the
back of the room; this is distinct from caption-sized supporting text. */
html body .legacy-content .Chalk {
font-size: clamp(1.75rem, 3vw, 35pt) !important;
line-height: 1.5 !important;
text-align: left !important;
}
/* Prevent page-local legacy rules from shrinking student-facing questions
below the shared Smartboard note size. */
html body .content-section .prompt-box p {
font-size: 2.0rem !important;
line-height: 1.5 !important;
}
/* Preserve the native graph dimensions in the displacement-from-v-t lesson.
These classroom visuals were being reduced by responsive media defaults and
smaller inline max-width values added during conversion. */
html body.finding-displacement-graphs-page .content-section .media-figure {
max-width: none;
}
html body.finding-displacement-graphs-page .content-section .media-figure img {
width: auto !important;
max-width: none !important;
height: auto !important;
}