/* The blog pages (/blog), in either chrome: WordPress renders its posts
   with figures, captions, galleries and alignment classes sized for its
   own theme, so here the images scale to the column and the figures and
   captions take Bootstrap's spacing. Loaded by app/views/blog/_head. */
.blog-body img,
.blog-excerpt img,
.blog-featured {
    max-width: 100%;
    height: auto;
}

.blog-body figure {
    margin: 0 0 20px;
    max-width: 100%;
}

.blog-body figure img {
    display: block;
    margin: 0 auto;
}

.blog-body figcaption,
.blog-body .wp-caption-text,
.blog-body .blocks-gallery-item__caption {
    margin-top: 5px;
    font-size: 85%;
    color: #777;
    text-align: center;
}

.blog-body .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.blog-body .alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.blog-body .alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

/* A gallery is a flex row of its figures; the nested-images and the older
   blocks-gallery-grid markup both land here. */
.blog-body .wp-block-gallery,
.blog-body .blocks-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.blog-body .wp-block-gallery > figure,
.blog-body .blocks-gallery-item {
    flex: 1 1 45%;
    margin: 0;
}

.blog-body iframe {
    max-width: 100%;
}

/* Headings inside a body sit under the post's own h1. */
.blog-body h1,
.blog-body h2 {
    font-size: 24px;
}

.blog-body h3,
.blog-body h4 {
    font-size: 18px;
}

.blog-body blockquote {
    font-size: inherit;
}

.blog-body pre {
    white-space: pre-wrap;
}

.blog-summary + .blog-summary {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.blog-summary h2 {
    margin-top: 0;
}

.blog-tags .label {
    display: inline-block;
    margin: 0 4px 4px 0;
    font-weight: normal;
}

.blog-sidebar h4 {
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.blog-sidebar ul li {
    margin-bottom: 6px;
}

@media (min-width: 992px) {
    .blog-sidebar {
        margin-top: 10px;
        padding-left: 15px;
        border-left: 1px solid #eee;
    }
}