/* Mobile home banner: proportional, full-width visual like the reference. */
@media (max-width: 760px) {
  body:not(.admin-body) .home-campaign-hero {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:not(.admin-body) .campaign-stage,
  body:not(.admin-body) .campaign-banner-carousel,
  body:not(.admin-body) .campaign-banner-slide {
    min-height: 0 !important;
    height: clamp(178px, 42vw, 275px) !important;
    max-height: none !important;
  }

  body:not(.admin-body) .campaign-banner-carousel,
  body:not(.admin-body) .campaign-banner-slide {
    aspect-ratio: 2.45 / 1 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  body:not(.admin-body) .campaign-banner-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
  }

  body:not(.admin-body) .campaign-banner-button {
    bottom: clamp(20px, 6vw, 34px) !important;
    min-height: clamp(32px, 8vw, 42px) !important;
    padding: 0 clamp(18px, 6vw, 34px) !important;
    border-radius: 999px !important;
    font-size: clamp(9px, 2.4vw, 12px) !important;
    line-height: 1 !important;
  }

  body:not(.admin-body) .campaign-banner-button.button-left,
  body:not(.admin-body) .campaign-banner-button.button-center,
  body:not(.admin-body) .campaign-banner-button.button-right {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  body:not(.admin-body) .campaign-banner-arrow {
    width: clamp(30px, 8vw, 42px) !important;
    height: clamp(30px, 8vw, 42px) !important;
    min-width: clamp(30px, 8vw, 42px) !important;
    min-height: clamp(30px, 8vw, 42px) !important;
    font-size: clamp(17px, 4.8vw, 24px) !important;
  }

  body:not(.admin-body) .campaign-banner-arrow.prev {
    left: clamp(14px, 4vw, 26px) !important;
  }

  body:not(.admin-body) .campaign-banner-arrow.next {
    right: clamp(14px, 4vw, 26px) !important;
  }

  body:not(.admin-body) .campaign-banner-dots {
    bottom: clamp(8px, 2vw, 13px) !important;
    gap: 4px !important;
  }

  body:not(.admin-body) .campaign-banner-dots span {
    width: 6px !important;
    height: 6px !important;
  }
}

@media (max-width: 430px) {
  body:not(.admin-body) .campaign-banner-carousel,
  body:not(.admin-body) .campaign-banner-slide {
    height: clamp(168px, 45vw, 202px) !important;
    aspect-ratio: 2.35 / 1 !important;
  }
}

@media (max-width: 360px) {
  body:not(.admin-body) .campaign-banner-carousel,
  body:not(.admin-body) .campaign-banner-slide {
    height: clamp(154px, 46vw, 176px) !important;
    aspect-ratio: 2.28 / 1 !important;
  }
}