/*
 * comparison.css — metal-replacement infographic section (#comparison).
 *
 * Single full-bleed image slot. The image itself (assets/img/
 * metal-replacement-compare.jpg) is a designed comparison chart with
 * three columns — brass / improved plastic / M60SF — and torque
 * numbers baked in. We just frame it as a card to visually rhyme with
 * the grade catalog above and the gallery below.
 *
 * Coupled with:
 *   - HTML markup in index.html under <section class="slab comparison">
 *   - assets/img/metal-replacement-compare.jpg (~129 KB, 1400×933)
 *
 * Last refactor: 2026-04-28 — extracted from the original cases.css.
 */

.comparison {
  padding-top: 64px;
  padding-bottom: 64px;
}

.comparison-figure {
  margin: 32px 0 0;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  overflow: hidden;
}

.comparison-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .comparison { padding-top: 48px; padding-bottom: 48px; }
  .comparison-figure { margin-top: 24px; }
}