.background {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
  isolation: isolate;
  z-index: 0;
}

.background:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: 0;
  z-index: -2;
  transition: opacity var(--transition);
}

.background:after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-veil);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition), background var(--transition);
}

header.background:before {
  opacity: var(--header-banner-image-opacity, var(--banner-image-opacity, var(--media-image-opacity)));
}

footer.background:before {
  opacity: var(--banner-image-opacity, var(--media-image-opacity));
}

header.background:after {
  opacity: var(--header-banner-veil-opacity, var(--banner-veil-opacity, var(--media-veil-opacity)));
}

footer.background:after {
  opacity: var(--banner-veil-opacity, var(--media-veil-opacity));
}

.banner-rotator {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--banner-image-opacity, var(--media-image-opacity));
}

header.background .banner-rotator {
  opacity: var(--header-banner-image-opacity, var(--banner-image-opacity, var(--media-image-opacity)));
}

.banner-rotator-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  opacity: 0;
  transition: opacity 1700ms ease-in-out;
}

.banner-rotator-layer[data-active=true] {
  opacity: 1;
}

header.background[data-rotating=true]:before,
footer.background[data-rotating=true]:before {
  opacity: 0;
}

section.background[data-has-image=true]:before {
  opacity: var(--media-image-opacity);
}

section.background[data-has-image=true]:after {
  opacity: var(--media-veil-opacity);
}

/*# sourceMappingURL=background.css.map */