/* A blog post page (templates/blog_detail.html). On screens 768px and wider the
   post is drawn half as big again, text, spacing, column and pictures alike,
   the way it looks at 150% browser zoom. Phones keep the usual sizes, since half
   as big again would leave only a few words on a line. Hand-written, so it needs
   no Tailwind build. */

@media (min-width: 48rem) {
    .blog-post {
        zoom: 1.5;
    }
}

/* Headings in a post's own text. The site-wide h2 grows with the window, which
   the zoom above would make very large on wide screens. :where keeps this
   weaker than a size class, such as on the research roundup's paper titles. */
:where(.blog-post) h2 {
    font-size: 2rem;
}