.inline-left-image {
    float: left;
    /* width: 40%; */
    max-width: 400px;
    margin: 20px 20px 20px 0;
    border-radius: 8px;
}
.inline-right-image {
    float: right;
    /* width: 40%; */
    max-width: 400px;
    margin: 20px 0 20px 20px;  /* space on the left side */
    border-radius: 8px;
}

.inline-center-image {
    display: block;
    margin: 25px auto;
    width: 80%;        /* default: 80% of container */
    max-width: 100%;   /* safeguard against overflow */
    height: auto;      /* maintain aspect ratio */
    float: none;       /* no text wrapping */
}

/* 📱 On small screens (mobile) */
@media (max-width: 600px) {
    .inline-center-image {
        width: 100%;   /* full width on mobile */
    }
}

.story-image-block {
    text-align: center;
    margin: 12px 0;
}

.image-caption {
    font-size: 0.8rem;
    color: #777;
    margin-top: 4px;
    font-style: italic;
}

.image-caption:empty {
    display: none;
}
/* Wrapper for all images */
.image-wrapper {
    display: inline-block;
    margin: 6 6px;          /* small horizontal gap */
    vertical-align: top;    /* avoids baseline spacing */
    line-height: 1;         /* keeps wrapper tight */
    text-align: center;     /* centers caption under image */
}

/* Center-aligned image */
.inline-center-image img {
    display: block;
    width: 80%;             /* take 80% of container */
    max-width: 100%;        /* don’t overflow */
    margin: 0 auto;         /* center horizontally */
    padding: 0;
}

/* Left/right aligned images can stay smaller */
.inline-left-image img,
.inline-right-image img {
    display: block;
    width: auto;            /* natural size */
    max-width: 400px;       /* optional limit */
}

/* Caption styling */
.image-wrapper .caption {
    display: block;
    margin-top: 2px;        /* very small gap */
    padding: 0;
    line-height: 1.2;       /* tighter spacing */
    font-size: 0.85em;
    color: #555;
}
.story-content::first-letter {
    font-size: 3em;        /* make it larger */
    font-weight: bold;     /* emphasize */
    float: left;           /* make it drop into the text */
    line-height: 1;        /* tighter spacing */
    margin-right: 6px;     /* small gap to the next letters */
    margin-top: 4px;       /* adjust vertical alignment */
}

@media (max-width: 500px) {
    .inline-left-image,
    .inline-right-image {
        float: none;
        margin: 20px auto;
        display: block;
    }
}