/* Dynamic values are applied to the theme's original promotional-banner DOM.
   classic.css continues to own spacing, responsiveness and the visual layout. */
.rav-dynamic-page-banner {
  color: var(--rav-original-banner-text-color, #fff);
}

.rav-dynamic-page-banner > div > h3 {
  color: var(--rav-original-banner-text-color, #fff);
}

.rav-dynamic-page-banner--0 > div > h3,
.rav-dynamic-page-banner--tel > div > h3 {
  color: var(--rav-original-banner-text-color, #262626);
}

.rav-dynamic-page-banner > .btn {
  --btn-color: var(--rav-original-banner-button-bg, #f02222) !important;
  background-color: var(--rav-original-banner-button-bg, #f02222) !important;
  border-color: var(--rav-original-banner-button-bg, #f02222) !important;
  color: var(--rav-original-banner-button-color, #fff) !important;
}

.rav-dynamic-page-banner > .btn:hover,
.rav-dynamic-page-banner > .btn:active {
  --btn-color: var(--rav-original-banner-button-bg, #f02222) !important;
  background-color: var(--rav-original-banner-button-bg, #f02222) !important;
  border-color: var(--rav-original-banner-button-bg, #f02222) !important;
  color: var(--rav-original-banner-button-color, #fff) !important;
}

.rav-dynamic-page-banner > button.btn {
  cursor: pointer;
}

.rav-dynamic-page-banner--align-center > div:first-child {
  flex-grow: 1;
  justify-content: center;
}

.rav-dynamic-page-banner--0,
.rav-dynamic-page-banner--1,
.rav-dynamic-page-banner--2,
.rav-dynamic-page-banner--tel {
  background-image: var(--rav-original-banner-mobile-bg, none) !important;
  background-color: var(--rav-original-banner-bg-color, transparent) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.rav-dynamic-page-banner--1,
.rav-dynamic-page-banner--2 {
  background-size: 90% !important;
}

@media (min-width: 768px) {
  .rav-dynamic-page-banner--0,
  .rav-dynamic-page-banner--1,
  .rav-dynamic-page-banner--2,
  .rav-dynamic-page-banner--tel {
    background-image: var(--rav-original-banner-desktop-bg, none) !important;
  }

  .rav-dynamic-page-banner--0,
  .rav-dynamic-page-banner--1,
  .rav-dynamic-page-banner--2 {
    background-size: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rav-dynamic-page-banner img {
    transition: none !important;
  }
}