.be-scroll-crossfade-gallery-wrapper {
    width: 100%;
    position: relative;
}

.be-scroll-crossfade-gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: block;
    /* No forced background color; images fully cover the area */
}

/* Layout: every non-base frame is overlaid on top of the base frame so
 * the container's intrinsic height matches the first image (= the actual
 * display area). Pre-2.1.2 this was JS-only; the JS still applies the
 * same inline styles for compatibility, but the CSS now provides the
 * same layout from page render. That's necessary in two contexts:
 *   1. The Elementor editor preview iframe doesn't always fire
 *      `frontend/element_ready/be_scroll_crossfade.default` on
 *      server-rendered widgets, so without the CSS the editor draws
 *      its selection rectangle around the full stacked-frame height
 *      (sum of every image), making the page hard to edit.
 *   2. On the front-end there's a brief pre-JS window where the
 *      container would otherwise be sized to the sum of every frame;
 *      now it sizes correctly from the first paint.
 */
.be-scroll-crossfade-gallery .be-scroll-crossfade-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s linear;
    will-change: opacity;
    backface-visibility: hidden;
}

.be-scroll-crossfade-gallery .be-scroll-crossfade-frame.be-scroll-crossfade-base-frame {
    position: relative;
    inset: auto;
    opacity: 1;
    z-index: 1;
}

.be-scroll-crossfade-gallery .be-scroll-crossfade-frame img {
    display: block;
    width: 100%;
    height: auto;
    backface-visibility: hidden;
}

/* Preloader overlay.
 *
 * Structure + spinner come from the shared `be-platform-ui` stylesheet
 * (`.be-platform-loader` + `.be-platform-spinner`). We only override the
 * platform tokens here to give the gallery preloader a tinted backdrop
 * with a white spinner on top. Keeping `.be-scroll-crossfade-preloader`
 * as the consumer-side selector lets us target the platform primitives
 * without forking them.
 */
.be-scroll-crossfade-preloader.be-platform-loader {
    --be-platform-loader-bg:        rgba(0, 0, 0, 0.25);
    --be-platform-loader-z-index:   10;
    --be-platform-spinner-size:     40px;
    --be-platform-spinner-track:    rgba(255, 255, 255, 0.35);
    --be-platform-spinner-color:    #ffffff;
    --be-platform-spinner-duration: 0.8s;
}