/* UNIVERSAL BLOG MOBILE FIX v1 */
@media (max-width: 768px) { html, body { overflow-x: hidden !important; max-width: 100vw !important; } }
img, video, iframe, svg { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  img.hero-portrait, img.author-photo, img.post-hero-image, img.post-photo, img.hero-image, img.portrait, img.hero, img.circle, img.rounded, img[class*="portrait"], img[class*="hero-photo"], img[class*="hero-image"], header img[width][height], .article-hero img, .post-hero img, header.post img, article > header > img:first-of-type {
    max-width: 160px !important; max-height: 160px !important; width: 160px !important; height: 160px !important;
    margin: 20px auto !important; display: block !important; object-fit: cover !important; aspect-ratio: 1 / 1 !important;
  }
  .cover img, .cover-image, .featured-image, figure > img:first-child { max-height: 240px !important; object-fit: cover !important; }
  article h1, .post-title, main h1, header.post h1 { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; line-height: 1.15 !important; }
  article h2, .post-content h2, main h2 { font-size: 1.4rem !important; line-height: 1.2 !important; margin-top: 36px !important; margin-bottom: 12px !important; }
  article h3, .post-content h3, main h3 { font-size: 1.15rem !important; margin-top: 28px !important; margin-bottom: 10px !important; }
  article p, .post-content p, main p { font-size: 1rem !important; line-height: 1.7 !important; }
  article, .post-content, .post-body, main > section, main > article { padding-left: 18px !important; padding-right: 18px !important; }
  .post-header, .article-header, header.post, header.article-hero { padding: 90px 18px 24px !important; }
  article blockquote, .post-content blockquote { padding: 14px 18px !important; margin: 20px 0 !important; font-size: 1rem !important; }
  article pre, article code, .post-content pre, .post-content code { max-width: 100% !important; overflow-x: auto !important; word-wrap: break-word !important; font-size: .9em !important; }
  article table, .post-content table { display: block !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  input, textarea, select { font-size: 16px !important; padding: 12px 14px !important; }
  .tldr, .lead, .faq-item, .faq-section, .highlight-box, .callout { padding: 18px 16px !important; font-size: 1rem !important; }
}
@media (max-width: 400px) {
  article, .post-content { padding-left: 14px !important; padding-right: 14px !important; }
  img.hero-portrait, img.author-photo, img[class*="portrait"] { max-width: 130px !important; width: 130px !important; height: 130px !important; }
  article h1, .post-title { font-size: 1.4rem !important; }
}