/* Lightweight replacement for the old LayerSlider runtime. */
.banner-slide #layerslider,
.vg-banner-slider {
  position: relative;
  width: 100% !important;
  max-width: 1024px;
  height: auto !important;
  aspect-ratio: 1024 / 402;
  overflow: hidden;
  visibility: visible;
}

.banner-slide #layerslider .ls-layer {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease-in-out;
  z-index: 1;
}

.banner-slide #layerslider .ls-layer:first-child,
.vg-banner-slider .ls-layer.ls-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.vg-banner-slider .ls-layer:first-child:not(.ls-active) {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.banner-slide #layerslider .ls-layer > * {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
}

.banner-slide #layerslider .ls-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-slide #layerslider .ls-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.vg-banner-slider .ls-bar-timer {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: #fff;
  border-bottom: 2px solid #555;
  opacity: .55;
  z-index: 4;
}