.image-captions-figure {
    margin: 0;
    padding: 2px;
    display: table; /* To allow for correct caption text wrapping */
    border-radius: 2px;
}

.image-captions-caption {
    margin: -5px 0 0 0;
    padding: 3px 5px;
    text-align: center;
    display: table-caption; /* To allow for correct caption text wrapping */
    caption-side: bottom;
}

.image-captions-figure, .image-captions-caption {
    background: var(--color-base-30);
}

figure.image-captions-figure:has(img[alt*="|left"]) {
    float: left;
    margin-right: 1em;
}

figure.image-captions-figure:has(img[alt*="|right"]) {
    float: right;
    margin-left: 1em;
}

figure.image-captions-figure:has(img[alt*="|center"]) {
    margin: 0 auto;
}