.we-background-slider-section { position: relative; overflow: hidden; isolation: isolate; padding: 64px 20px; }
.we-background-slider-section__slide { position: absolute; inset: 0; z-index: 0; display: block; box-sizing: border-box; padding: inherit; opacity: 0; background-position: center; background-size: cover; transition: opacity .65s ease; pointer-events: none; }
/*
   The selected slide must stay in normal flow on the public page. Otherwise
   its content is absolute and an auto-height section only gets its padding
   (the reason the public section was visibly shorter than in the editor).
   The negative margin lets the slide's background cover the whole section
   while its inner content still determines the same height as in the editor.
*/
.we-background-slider-section__slide.is-active { position: relative; inset: auto; z-index: 1; margin: calc(0px - var(--section-padding, 64px)) -20px; opacity: 1; pointer-events: auto; }
/* A fixed height is a different layout mode: let the active slide cover the
   complete section. In auto mode the rule above keeps its content in flow. */
.we-background-slider-section[data-we-background-height]:not([data-we-background-height="auto"]) > .we-background-slider-section__slide.is-active { position: absolute; inset: 0; margin: 0; }
.we-background-slider-section__inner { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 1200px; min-height: 80px; margin: 0 auto; }
.we-background-slider-section[data-we-section-max-width="false"] .we-background-slider-section__inner { max-width: none; margin-left: 0; margin-right: 0; }