/* image.css — one image, optionally captioned, at one of three widths.
 *
 * Yours: edit it, or delete the file.
 */

.velocity-image {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.velocity-image-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.velocity-image-caption {
    max-width: 90%;
    margin-top: 0.5rem;
    font-size: 0.9em;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    color: var(--ink-faint);
}

/* The three widths the editor offers. */
.velocity-image-small {
    width: 40%;
    margin-inline: auto;
}

.velocity-image-medium {
    width: 70%;
    margin-inline: auto;
}

.velocity-image-full {
    width: 100%;
}

/* Below this, a 40% image is a thumbnail nobody can see. */
@media (max-width: 500px) {
    .velocity-image-small,
    .velocity-image-medium {
        width: 100%;
    }
}

/* An image the author linked somewhere. The anchor wraps the picture, which
   makes the picture a grandchild of the post body — so it reclaims the body's
   own element margins and pushes the caption away from the image. Zeroing the
   anchor's children keeps a linked image spaced exactly like a plain one. */
.velocity-image-link > * {
    margin: 0;
}