/*
 * BembiMarket - responsive banner proportions
 * 2026-10-14
 *
 * OCT Showcase style.min.css sets 360/392/410px fixed image heights at
 * desktop breakpoints while the width remains fluid. This stretches
 * full-image slides on wide displays. Use intrinsic image aspect ratios.
 *
 * The mobile <picture> source is preserved: its own original ratio applies.
 * Only banner-related images are targeted; product cards are unaffected.
 */

/* Full-image hero banners (Octemplates Slideshow Plus). */
.sc-slideshow-plus-item-fullimg a,
.sc-slideshow-plus-item-fullimg picture {
  display: block;
  width: 100%;
}

.sc-slideshow-plus-item-fullimg img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  object-fit: contain;
}

/* Other slideshow/banner modules: scale without altering proportions. */
.default-slideshow img,
.swiper-viewport .swiper-slide img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
}

/* Four category banners on home and Octemplates Banner Plus blocks.
   Existing desktop/mobile widths and grid rules remain intact. */
.banner img,
.sc-banner-plus .sc-banner-plus-item-img img,
.sc-column-banners .sc-banner-plus-item-img img {
  max-width: 100%;
  height: auto !important;
}