/* Front-end styles for AI Blog Content article imagery */

.abc-article-image {
    margin: 20px 0;
}

.abc-article-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* Layout variants for in-article images.
 * We also rely on core .alignleft/.alignright/.aligncenter classes so
 * themes can integrate naturally.
 */
.abc-article-image--full {
    text-align: center;
}

.abc-article-image--half-left,
.abc-article-image--half-right {
    max-width: 50%;
}

.abc-article-image--half-left {
    float: left;
    margin: 10px 20px 20px 0;
}

.abc-article-image--half-right {
    float: right;
    margin: 10px 0 20px 20px;
}

@media (max-width: 782px) {
    .abc-article-image--half-left,
    .abc-article-image--half-right {
        float: none;
        max-width: 100%;
        margin: 16px 0;
    }
}