#ad-container {
  position: relative;
  width: 100%;
}

/* ============================================================
 * BANNER CONTAINERS — all hidden by default
 * Breakpoints match banners.js getDevice():
 *   mobile  : width <= 768px
 *   tablet  : 769px – 1024px
 *   desktop : >= 1025px
 * ============================================================ */
#mobile-banner,
#mobile-banner-bottom,
#mobile-landscape-banner,
#tablet-banner-top,
#tablet-portrait-banner-bottom,
#tablet-landscape-banner-top,
#tablet-landscape-banner-left,
#tablet-landscape-banner-right,
#desktop-banner-left,
#desktop-banner-right {
  display: none;
}

/* Initial banner — hidden until JS injects content */
#initial-banner {
  position: relative;
  display: none;
  width: 100%;
  margin: auto;
}

/* ============================================================
 * MOBILE PORTRAIT  (width <= 768px, portrait)
 * ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {
  #mobile-banner,
  #mobile-banner-bottom,
  #initial-banner {
    display: block;
  }
}

/* ============================================================
 * MOBILE LANDSCAPE  (width <= 768px, landscape)
 * ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {
  #mobile-landscape-banner,
  #mobile-banner-bottom,
  #initial-banner {
    display: block;
  }
}

/* ============================================================
 * TABLET PORTRAIT  (769px – 1024px, portrait)
 * ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) {
  #tablet-banner-top,
  #tablet-portrait-banner-bottom,
  #initial-banner {
    display: block;
  }
}

/* ============================================================
 * TABLET LANDSCAPE  (769px – 1024px, landscape)
 * ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  #tablet-landscape-banner-top,
  #tablet-landscape-banner-left,
  #tablet-landscape-banner-right,
  #initial-banner {
    display: block;
  }
}

/* ============================================================
 * DESKTOP  (>= 1025px)
 * ============================================================ */
/* Only show initial banner on smaller desktops (1025–1279px) */
@media (min-width: 1025px) and (max-width: 1279px) {
  #initial-banner {
    display: block;
  }
  #desktop-banner-left,
  #desktop-banner-right {
    display: none;
  }
}

/* Side banners only on wide desktops (1280px+) */
@media (min-width: 1280px) {
  #desktop-banner-left,
  #desktop-banner-right,
  #initial-banner {
    display: block;
  }

  /* Push fixture/content area away from the 120px fixed side banners */
  .content {
    padding-left: 130px !important;
    padding-right: 130px !important;
  }
}

/* On very wide screens (1600px+) the centered content no longer reaches the banners */
@media (min-width: 1600px) {
  .content {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ============================================================
 * LAYOUT
 * ============================================================ */

/* Desktop side banners */
#desktop-banner-left,
#desktop-banner-right {
  position: fixed;
  top: 200px;
  width: 120px;
  z-index: 10;
}
#desktop-banner-left,
#tablet-landscape-banner-left {
  left: 0;
}
#desktop-banner-right,
#tablet-landscape-banner-right {
  right: 0;
}

/* Tablet landscape side banners */
#tablet-landscape-banner-left,
#tablet-landscape-banner-right {
  position: absolute;
  top: 250px;
  z-index: 10;
  width: 10%;
  height: 100%;
}

/* Top banners — normal flow */
#tablet-banner-top,
#tablet-landscape-banner-top,
#mobile-banner,
#mobile-landscape-banner {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10;
}

/* Bottom banners — fixed to bottom of screen */
#mobile-banner-bottom,
#tablet-portrait-banner-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  height: auto;
}

/* ============================================================
 * IMAGES & VIDEOS — always fill container width
 * ============================================================ */
#desktop-banner-left img,
#desktop-banner-right img,
#mobile-banner img,
#mobile-banner-bottom img,
#mobile-landscape-banner img,
#tablet-banner-top img,
#tablet-portrait-banner-bottom img,
#tablet-landscape-banner-top img,
#tablet-landscape-banner-right img,
#tablet-landscape-banner-left img,
#initial-banner img,
#desktop-banner-left video,
#desktop-banner-right video,
#mobile-banner video,
#mobile-banner-bottom video,
#mobile-landscape-banner video,
#tablet-banner-top video,
#tablet-portrait-banner-bottom video,
#tablet-landscape-banner-top video,
#tablet-landscape-banner-right video,
#tablet-landscape-banner-left video,
#initial-banner video {
  width: 100%;
  height: auto;
}