/* Recovered article layouts: BlogPost, BlogPostWithCategory, FAQ/Page,
 * Dictionary/Page. Port to their shared source layout before rebuilding.
 * Legacy .wrapper .container rules overrode the content container's left
 * gutter and flex display. Keep breadcrumbs, body and related posts on one
 * centered grid, aligned with the internal header at every breakpoint.
 */
.wrapper.__blog .container._content:is(
  [data-v-801d63c2], [data-v-c26899ba],
  [data-v-0db4b945], [data-v-61569941]
) {
  --fp-article-gutter: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--fp-layout-space-4, 20px);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--fp-article-gutter);
}
@media (max-width: 1500px) {
  .wrapper.__blog .container._content:is(
    [data-v-801d63c2], [data-v-c26899ba],
    [data-v-0db4b945], [data-v-61569941]
  ) { --fp-article-gutter: 70px; }
}
@media (max-width: 768px) {
  .wrapper.__blog .container._content:is(
    [data-v-801d63c2], [data-v-c26899ba],
    [data-v-0db4b945], [data-v-61569941]
  ) { --fp-article-gutter: var(--fp-layout-gutter, 20px); }
}
/* Article paragraphs are rendered through v-html and have no Vue scope
 * attribute. The recovered mobile selector never matched their real DOM. */
@media (max-width: 480px) {
  .wrapper.__blog .container._content:is(
    [data-v-801d63c2], [data-v-c26899ba],
    [data-v-0db4b945], [data-v-61569941]
  ) .block-paragraph { text-align: left !important; }
}