/**
 * =====================================================================
 * FEATURE BLOCK COMPONENT — STYLES
 * =====================================================================
 * NOT REPEATED HERE: .feature__media, .feature__media img,
 * .feature__badge, .feature__badge .dot, .eyebrow, .btn/.btn--outline
 * — all already exist in assets/css/global.css and are reused here
 * as-is, with no duplication. (.feature__media/.feature__badge
 * specifically live in global.css rather than in our_story's own
 * style.css, precisely BECAUSE this component also needs them — see
 * global.css's own comment on those rules for why a rule shared
 * across two component folders has to live somewhere that always
 * loads, not in either component's own conditionally-loaded file.)
 *
 * Only the parts genuinely new to this component are below: the
 * two-column ".feature" grid wrapper, and the numbered list.
 *
 * FONT-FAMILY !important APPLIED FROM THE START (not waiting for a bug
 * report this time): confirmed on statistics'/hero_carousel's
 * counters that Blocksy uses !important on its own font-family, so
 * specificity alone never wins that fight — only a matching
 * !important does, regardless of how specific the competing selector
 * already is. "li b" below is also un-classed, the same shape as
 * hero_carousel's <span data-total> that turned out to be silently
 * losing its font to this project's own site-wide safety net — its
 * rule is written defensively here from the start instead.
 * =====================================================================
 */

div.feature {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.feature h2 { margin: 20px 0 16px; }
.feature p { color: var(--slate); margin-bottom: 28px; }

div.feature ul { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 16px; }
.feature ul li { display: flex; gap: 14px; align-items: baseline; }
.feature ul li b { font-family: var(--font-mono) !important; font-size: 13px; color: var(--red); flex-shrink: 0; }
.feature ul li span { color: var(--ink-2); font-size: 15px; }

@media (max-width: 900px) {
  div.feature { grid-template-columns: 1fr; gap: 32px; }
}