.article-figure {
    margin: 1.25em auto;
    max-width: 100%;
    text-align: center;
}

.article-figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

.article-figure figcaption {
    margin-top: 0.5em;
    color: #475569;
    font-size: 0.875em;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.article-figure figcaption:empty {
    display: none;
}

.article-figure-full img {
    width: 100%;
}

.article-figure-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1em;
    clear: both;
    margin-block: 1.25em;
}

.article-figure-grid > .article-figure {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.article-figure-grid > .article-figure-full {
    grid-column: 1 / -1;
}

.article-figure-grid > .article-figure-left img { margin-left: 0; }
.article-figure-grid > .article-figure-right img { margin-right: 0; }

@media (min-width: 601px) {
    .article-figure-left:not(.article-figure-grid > .article-figure) {
        float: left;
        width: 50%;
        margin: 0.5em 1em 1em 0;
    }

    .article-figure-right:not(.article-figure-grid > .article-figure) {
        float: right;
        width: 50%;
        margin: 0.5em 0 1em 1em;
    }
}

@media (max-width: 600px) {
    .article-figure-grid { grid-template-columns: minmax(0, 1fr); }
    .article-figure-left img { margin-left: 0; }
    .article-figure-right img { margin-right: 0; }
}