{#============================================#}
{#     BEFORE/AFTER IMAGE SLIDER STYLING      #}
{#============================================#}

.before-after-image-slider-img-col figure {
  margin: 0px !important; {# removes default figure margin #}
  height: 100%;
}

{#============================================#}
{#         BACKGROUND IMAGE STYLING           #}
{#============================================#}

.bg-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100% !important;
  transform: translate(-50%, -50%); {# centers image in container #}
  object-fit: cover; {# ensures image fills space without distortion #}
  transition: opacity 1s ease; {# smooth fade transition #}
  z-index: -1;
  display: block !important;
  opacity: 0;
}

.bg-image.fadeout {
  opacity: 0 !important; {# ensure it's fully hidden #}
}

.bg-image.next {
  opacity: 1;
  z-index: 0 !important; {# behind the current image #}
}

.bg-image.current {
  opacity: 1;
  z-index: 1 !important; {# on top of all other background images #}
}