/* The card is PostCard and the base list grid lives in the global app.css, shared
   with the home-page embed. Only the page's two-column layout is here: one column
   on a phone, two from tablet width, with the newest post across both. */
@media (min-width: 48rem) {
    .post-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .post-list-featured {
        grid-column: 1 / -1;
    }
}

/* Same centred 42rem reading column as a content page (ContentPage.razor.css), so
   every page of the site shares one column under the header. Two cards still fit
   side by side in it. */
h1,
article,
p,
.post-list {
    max-width: 42rem;
    margin-inline: auto;
}

/* The intro's last paragraph drops its margin (app.css), so the first card would
   sit right under the text; this gives it the same air as between sections. */
article {
    margin-bottom: var(--space-5);
}