.mb-dynamic-banner {
  position: relative;
  isolation: isolate;
}

.mb-dynamic-banner[data-banner-background],
.mb-dynamic-banner [data-banner-background] {
  transition:
    background-image 0.35s ease,
    transform 0.35s ease,
    filter 0.35s ease;
}

.mb-dynamic-banner[data-banner-background].is-banner-loaded,
.mb-dynamic-banner [data-banner-background].is-banner-loaded {
  background-image:
    linear-gradient(
      118deg,
      rgba(6, 6, 6, calc(var(--mb-banner-overlay-opacity, 0.42) + 0.28)) 0%,
      rgba(6, 6, 6, var(--mb-banner-overlay-opacity, 0.42)) 46%,
      rgba(18, 10, 2, calc(var(--mb-banner-overlay-opacity, 0.42) * 0.7)) 100%
    ),
    var(--mb-banner-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

.mb-dynamic-banner [data-banner-overlay].is-banner-overlay-ready {
  opacity: var(--mb-banner-overlay-opacity, 0.35);
  transition: opacity 0.24s ease;
}

.mb-dynamic-banner.is-banner-ready [data-banner-title],
.mb-dynamic-banner.is-banner-ready [data-banner-subtitle],
.mb-dynamic-banner.is-banner-ready [data-banner-description],
.mb-dynamic-banner.is-banner-ready [data-banner-button] {
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

@media (max-width: 680px) {
  .mb-dynamic-banner[data-banner-background].is-banner-loaded,
  .mb-dynamic-banner [data-banner-background].is-banner-loaded {
    background-position: center top !important;
  }
}