.homeCampaignBanner {
  line-height: 0;
}

.homeCampaignBanner .heroWrap {
  position: relative;
  width: 100%;
  line-height: 0;
  /* Anchor the donation overlay (size + position) to the banner image, not
     the viewport: cqw units below resolve against this container's width,
     so circles/link track the image regardless of scrollbar or a narrower
     wrapping container (vw would drift in both cases). */
  container-type: inline-size;
}

.homeCampaignBanner .heroWrap--desktop {
  display: block;
}

.homeCampaignBanner .heroWrap--mobile {
  display: none;
}

@media (max-width: 900px) {
  .homeCampaignBanner .heroWrap--desktop {
    display: none;
  }

  .homeCampaignBanner .heroWrap--mobile {
    display: block;
  }
}

.homeCampaignBanner .heroImage {
  width: 100%;
  display: block;
}

.homeCampaignBanner .heroDonationBlock {
  position: absolute;
  bottom: clamp(8px, 2.5cqw, 52px);
  /* Base offset + a fixed 40px nudge to the right. */
  left: calc(clamp(16px, 3.5cqw, 80px) + 40px);
  max-width: calc(50% - clamp(16px, 3.5cqw, 80px));
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(8px, 1.2cqw, 28px);
}

.homeCampaignBanner .heroDonationButtons {
  display: flex;
  flex-direction: row;
  /* Spacing between the three circles, +20% (6/1cqw/22 -> 7/1.2cqw/26). */
  gap: clamp(7px, 1.2cqw, 26px);
  flex-shrink: 0;
}

/* Nudge the desktop circles down relative to the link in the same row. */
.homeCampaignBanner .heroDonationBlock .heroDonationButtons {
  transform: translateY(20px);
}

.homeCampaignBanner .heroDonationButton {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  flex-shrink: 0;
  display: inline-block;
}

.homeCampaignBanner .heroDonationButton img {
  /* Desktop circles, enlarged ~10% then +15% => ~1.265x (70/10cqw/200 -> 89/12.65cqw/253). */
  width: clamp(89px, 12.65cqw, 253px);
  height: auto;
  display: block;
  max-width: 100%;
}

@container (min-width: 1900px) {
  .homeCampaignBanner .heroDonationButton img {
    /* Wide-screen circles, enlarged ~10% then +15% => ~1.265x (200/10cqw/340 -> 253/12.65cqw/430). */
    width: clamp(253px, 12.65cqw, 430px);
  }
}

.homeCampaignBanner .heroCampaignLink {
  text-decoration: underline;
  font-weight: 700;
  font-size: clamp(20px, 1.5cqw, 26px) !important;
  line-height: 1.3;
  color: #e64650;
  background: hsla(0, 0%, 100%, .78);
  border-radius: 6px;
  padding: clamp(4px, .5cqw, 10px) clamp(8px, 1cqw, 18px);
  flex-shrink: 0;
  white-space: nowrap;
}

.homeCampaignBanner .heroDonationBlock--mobile {
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 2cqw, 14px);
  width: 100%;
  padding: 0 clamp(16px, 5cqw, 32px);
  box-sizing: border-box;
}

.homeCampaignBanner .heroDonationButtons--mobile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(6px, 2.5cqw, 16px);
  width: 100%;
}

.homeCampaignBanner .heroDonationButtons--mobile .heroDonationButton img {
  width: clamp(80px, 28cqw, 140px);
}

.homeCampaignBanner .heroCampaignLink--mobile {
  font-size: clamp(13px, 3.8cqw, 18px) !important;
  text-align: center;
  color: #e64650;
  border-radius: 6px;
  padding: 5px 14px;
  white-space: normal;
  max-width: calc(100% - 32px);
}