/* Use available content width, including changes caused by the sidebar. */
@media (max-width: 760px), (min-width: 761px) and (max-width: 1100px) and (any-pointer: coarse) {
  body.membership-reference .pricing-banner {
    display: block;
    height: auto;
    min-height: 0;
    padding: 26px 24px 24px;
  }
  body.membership-reference .pricing-banner > .member-eyebrow {
    top: auto;
    margin: 0 0 12px;
    font-size: 10px;
    line-height: 1.5;
    gap: 7px;
  }
  body.membership-reference .pricing-banner .member-eyebrow .membership-brand-logo {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
  body.membership-reference .pricing-banner > h1 {
    transform: none;
    margin: 0 0 8px;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.35;
    letter-spacing: 0;
  }
  body.membership-reference .pricing-banner .poster-title-intro,
  body.membership-reference .pricing-banner .poster-title-offer {
    display: block;
    white-space: normal;
  }
  body.membership-reference .pricing-banner .membership-sale-number {
    font-size: 1.18em;
  }
  body.membership-reference .pricing-banner > p {
    top: auto;
    margin: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.6;
  }
  body.membership-reference .pricing-banner > .poster-clock {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: 440px;
    margin: 22px 0 0;
    text-align: center;
  }
  body.membership-reference .pricing-banner .poster-clock-units {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  body.membership-reference .pricing-banner .poster-clock-units b {
    font-size: clamp(30px, 10vw, 44px);
    line-height: 1.1;
  }
  body.membership-reference .pricing-banner .poster-clock-units small {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.4;
    color: #c1d6d8;
  }
}