/* ═══════════════════════════════════════════════════════════════════
   Velocity Image — max-width support.

   The optional "Image Width (px)" dialog field applies an inline
   max-width:Npx to the image wrapper (marked with data-vel-image-wrap).
   Mirroring the Hero image-width behaviour, the fixed max-width only
   takes effect on tablet/desktop; on mobile the image stays full-width so
   it never overflows a narrow column.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  [data-vel-image-wrap] {
    max-width: none !important;
  }

  /* "Mobile Image Width (px)" override — constrains the image on mobile
     (overriding the default full-width) and positions it per Mobile Alignment.
     The px value arrives via the --vel-img-mobile-mw custom property set inline
     on the wrapper; margins handle the horizontal position. */
  [data-vel-image-mobile-mw] {
    display: block !important;
    width: 100% !important;
    max-width: var(--vel-img-mobile-mw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  [data-vel-image-mobile-mw][data-vel-image-mobile-align="left"] {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  [data-vel-image-mobile-mw][data-vel-image-mobile-align="right"] {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  [data-vel-image-mobile-mw] > img {
    width: 100% !important;
    max-width: 100% !important;
  }
}