/* Finished transparent artwork replaces the CSS-built discount circles. */
.hero .campaign-panel .offer-card > .offer-badge.image-badge,
.price-panel .price-discount-badge.image-badge {
  position: relative;
  inset: auto;
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  line-height: 1;
  overflow: visible;
}
.offer-badge.image-badge::before,
.offer-badge.image-badge::after { content: none; }
.hero .campaign-panel .offer-card > .offer-badge.image-badge {
  grid-area: badge;
  width: 240px;
  height: 240px;
  margin: 0 0 8px;
  justify-self: center;
  align-self: center;
}
.price-panel .price-discount-badge.image-badge {
  grid-area: badge;
  width: 160px;
  height: auto;
  margin: 0 0 8px;
  justify-self: end;
  align-self: center;
}
.image-badge > .discount-badge-art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.price-badge-period {
  display: table;
  margin: 0 auto 4px;
  padding: 3px 11px 4px;
  border: 1px solid var(--cyan);
  color: var(--cyan-dark);
  background: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .06em;
  white-space: nowrap;
}
/* Read once by assistive technology; the same words are visible in the PNG. */
.image-badge > .badge-copy-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  font-size: 1px;
  line-height: 1;
}
@media (max-width: 1200px) {
  .hero .campaign-panel .offer-card > .offer-badge.image-badge { width: 206px; height: 206px; }
}
@media (min-width: 821px) and (max-width: 1200px) {
  .price-panel .price-discount-badge.image-badge { width: 136px; }
  .price-badge-period { font-size: 10px; padding: 2px 10px 3px; }
}
@media (max-width: 1000px) {
  .hero .campaign-panel .offer-card > .offer-badge.image-badge { width: 220px; height: 220px; }
}
@media (max-width: 820px) {
  .hero .campaign-panel .offer-card > .offer-badge.image-badge { width: 180px; height: 180px; }
}
@media (max-width: 620px) {
  .hero .campaign-panel .offer-card > .offer-badge.image-badge { width: 192px; height: 192px; margin-bottom: 21px; }
  .price-panel .price-discount-badge.image-badge { width: 124px; margin: 0; }
  .price-badge-period { margin-bottom: 3px; font-size: 9px; padding: 2px 9px 3px; }
}
@media (max-width: 370px) {
  .price-panel .price-discount-badge.image-badge { width: 114px; }
}