/* Promo artwork and spacing from the supplied VeeClub reference. */
.promo-page.promo-reference { width: 735px; max-width: calc(100% - 32px); margin: 12px auto 40px; }
.promo-reference .promo-section { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.promo-reference .promo-section .promo-heading-art { display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; background: none; border: 0; line-height: 0; }
.promo-reference .promo-heading-art img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; object-fit: contain; }
.promo-reference .promo-cards { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 0; margin: 0; padding: 16px 0 10px; border: 0; border-radius: 0; background: none; }
.promo-reference .promo-image-button { display: block; flex: 0 1 344px; width: 344px; max-width: calc(50% - 5px); margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; overflow: hidden; }
.promo-reference .promo-image-button img { display: block; width: 100%; height: auto; aspect-ratio: 488 / 170; object-fit: contain; }
.promo-reference .promo-cards .claim-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; flex: 0 0 93px; width: 93px; min-width: 0; height: 120px; margin: 0; padding: 10px 6px 27px; border: 0; border-radius: 6px; background: transparent url('../images/547a9607519a62afc9bf9.png') center / 100% 100% no-repeat; box-shadow: none; color: #bfbfbf; text-align: center; font: 13px/16px Arial, sans-serif; }
.promo-reference .claim-card::before { content: none; }
.promo-reference .claim-card .claim-name { display: block; font: inherit; max-width: 100%; }
.promo-reference .claim-card strong { display: block; margin-top: 4px; font: 700 14px/17px Arial, sans-serif; color: #eee; }
.promo-reference :is(.claim-card, .promo-image-button):hover { filter: brightness(1.12); }
.promo-reference :is(.claim-card, .promo-image-button):focus-visible { outline: 2px solid #b7ff00; outline-offset: 3px; }
@media (max-width: 520px) {
  .promo-page.promo-reference { max-width: calc(100% - 24px); margin-top: 14px; }
  .promo-reference .promo-cards { gap: 10px 8px; padding-top: 12px; padding-bottom: 16px; }
  .promo-reference .promo-image-button { flex-basis: calc(50% - 4px); max-width: calc(50% - 4px); }
  .promo-reference .promo-cards .claim-card { flex-basis: 86px; width: 86px; height: 111px; font-size: 12px; line-height: 15px; padding-top: 9px; }
}
@media (max-width: 360px) {
  .promo-reference .promo-image-button { flex-basis: 100%; max-width: 100%; }
}
/* User-owned button assets: images/claim-card.png and images/claim.png. */
.promo-reference .promo-image-button img { aspect-ratio: auto; height: auto; object-fit: contain; }
.promo-reference .promo-cards .claim-card {
  position: relative; padding-bottom: 32px;
  background-color: #080d17;
  border: 1px solid #7633a2; border-radius: 6px;
}
.claim-cta { position: absolute; bottom: 7px; left: 12px; right: 12px; height: 19px; display: grid; place-items: center; border-radius: 12px; background: #7932a7; color: white; font: 700 11px/19px Arial, sans-serif; }
.claim-cta img { display: block; width: 100%; height: 100%; object-fit: contain; }
.claim-cta img[hidden], .claim-cta span[hidden] { display: none; }
/* Uploaded claim artwork already contains its CLAIM button. */
.promo-reference .promo-cards .claim-card { border: 0; background-color: transparent; }