/* Both variants render above the report title (not beside it -- a
   side-by-side flex layout was tried first, but the wrap breakpoint
   depended on each page's own title/description text width, which is
   inconsistent and unpredictable across pages). Toggle between the
   desktop and mobile campaign banner variants via a plain media query;
   768px matches the window.innerWidth threshold the report pages already
   use for their own is_mobile chart-rendering logic, kept the same here
   purely for consistency -- this swap itself doesn't depend on that JS
   value at all, since a plain media query is simpler for something this
   presentational. */
.campaign-banner-desktop {
  margin: 0 0 12px 0;
}

.campaign-banner-mobile {
  display: none;
  margin: 0 0 12px 0;
}

@media (max-width: 767px) {
  .campaign-banner-desktop {
    display: none;
  }
  .campaign-banner-mobile {
    display: block;
  }
}