/* ============================================================ ARTICLE RESPONSIVE LAYOUT — Ben 2026-08-06 Articles were a single 760px mobile-scale column at every viewport. This file adds tablet + desktop tiers on top of the per-article inline styles. Loaded last in so it wins ties. ============================================================ */ /* ---- TABLET 601–1023px ---- */ @media (min-width: 601px) and (max-width: 1023px) { .article-body, .article-header { max-width: 700px; } .article-header h1 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); } .article-body p, .article-body li, .article-body blockquote p { font-size: 0.95rem; } .article-body h2 { font-size: 1.3rem; margin: 38px 0 12px; } .article-body h3 { font-size: 1.05rem; } .pick-card { padding: 24px; } .pick-card p { font-size: 0.9rem; } .product-card { grid-template-columns: 170px 1fr; gap: 22px; } .product-card .product-image { width: 170px; } } /* ---- DESKTOP ≥1024px ---- */ @media (min-width: 1024px) { .article-body, .article-header { max-width: 1100px; margin-inline: auto; } /* resources articles carry hard-coded style="max-width:720px" wrappers (FAQ, related blocks) — inline styles need !important to override */ div[style*="max-width:720px"], div[style*="max-width: 720px"] { max-width: 1100px !important; } .article-header { margin-bottom: 40px; } .article-header h1 { font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.15; } .article-header .meta { font-size: 0.78rem; } .article-body p, .article-body li, .article-body blockquote p { font-size: 1rem; line-height: 1.75; } .article-body h2 { font-size: 1.45rem; margin: 44px 0 14px; } .article-body h3 { font-size: 1.15rem; margin: 28px 0 10px; } .article-back { font-size: 0.82rem; } .pick-card { padding: 28px 32px; margin: 24px 0; } .pick-card h3 { font-size: 1.15rem; } .pick-card p { font-size: 0.95rem; } .pick-card .badge { font-size: 0.72rem; } .pick-card .specs { font-size: 0.85rem; padding-top: 14px; margin-top: 14px; } .product-card { grid-template-columns: 210px 1fr; gap: 28px; } .product-card .product-image { width: 210px; } .product-card .stars { font-size: 0.8rem; } .article-body .product-cta { font-size: 0.85rem; padding: 11px 22px; } .compare-table { font-size: 0.82rem; } .compare-table thead th { font-size: 0.76rem; } .compare-table th, .compare-table td { padding: 11px 13px; } .article-cta { padding: 40px; } .article-cta h3 { font-size: 1.2rem; } .article-cta p { font-size: 0.92rem; } .cta-grid a strong { font-size: 0.95rem; } .cta-grid a span { font-size: 0.8rem; } .bench-section { padding: 24px 28px; } .bench-section h3 { font-size: 1.05rem; } .bench-section p { font-size: 0.95rem; } .affiliate-disclosure { font-size: 0.8rem; } .all-buying-guides-link { font-size: 0.8rem; } } /* ---- WIDE DESKTOP ≥1440px ---- */ @media (min-width: 1440px) { .article-body, .article-header { max-width: 1240px; } div[style*="max-width:720px"], div[style*="max-width: 720px"] { max-width: 1240px !important; } .article-body p, .article-body li, .article-body blockquote p { font-size: 1.05rem; } .product-card { grid-template-columns: 240px 1fr; gap: 32px; } .product-card .product-image { width: 240px; } }