/* AI Blog Generator – Frontend Styles
 *
 * Mobile overrides for the lead image. The generated <figure> carries the
 * values as CSS custom properties (--waibg-img-*) and a gating class per
 * override, so these rules only apply when a mobile value was configured.
 * The breakpoint matches Elementor's default mobile breakpoint (≤767px).
 * !important is required to beat the desktop inline styles.
 */

@media (max-width: 767px) {
    .waibg-demo-image--mw img {
        width: var(--waibg-img-w-m) !important;
    }

    .waibg-demo-image--mh img {
        height: var(--waibg-img-h-m) !important;
        object-fit: var(--waibg-img-fit, cover) !important;
    }
}