/* =====================================================================
   ttlm — Matchers banner (img/matchers-banner.png, 4344x525)
   See custom-matchers-banner.html. Same mechanism as the Campaign Pillars
   banner below it — see css/pillars-banner.css for the full explanation.

   Same width as the "Donations received" panel (1000px, inside .container).
     - > 1094px screen : static image fitted to that width, laid over the
       slider (which stays mounted — Owl sizes its items at init time, so it
       is never display:none).
     - <= 1094px screen: Owl Carousel "ticker": the banner stays 1000px wide
       (autoWidth) and scrolls sideways continuously; swipe/drag follows the
       finger, then the scroll resumes.
       (Breakpoint raised from 1000 to 1094: between those two widths
       Bootstrap's .container is narrower than the 1000px wrap, which made
       the static overlay render oddly — the ticker avoids that since it
       scrolls instead of being fitted to the container.)
   ===================================================================== */

.ttlm-matchers-banner {
  margin-bottom: 13px;
}

.ttlm-matchers-banner__wrap {
  position: relative; /* anchors the static image overlay */
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px; /* matches the panel's corners */
}

/* 4 flush items, each a 250px window onto the same image scaled to
   1000x120.86 (4344x525 at 1000 wide), shifted with the inline
   background-position — visually one continuous 1000px strip. Owl
   (autoWidth) reads the item width from here. */
.ttlm-matchers-banner__slide {
  width: 250px;
  height: 120.86px;
  background-image: url('/customizations/matching-template-0-ttlm/img/matchers-banner.png');
  background-size: 1000px 120.86px;
  background-repeat: no-repeat;
  user-select: none;
}

/* Static image: hidden on <= 1094px, shown over the slider above that,
   covering it edge to edge whatever the wrap's exact width. */
.ttlm-matchers-banner__static {
  display: none;
}

@media (min-width: 1094.02px) {
  .ttlm-matchers-banner__static {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
  }
}