.display-ad[hidden] { display: none; }
.display-ad {
  --ad-width: 320px;
  --ad-height: 50px;
  box-sizing: content-box;
  width: var(--ad-width);
  margin: 32px auto;
  padding: 0;
  color: var(--muted, #a7b9bc);
  grid-column: 1 / -1;
  flex-shrink: 0;
}
.display-ad--compact { padding-top: 16px; border-top: 1px solid var(--line, #284a52); }
.display-ad--rectangle { --ad-width: 300px; --ad-height: 250px; }
.display-ad-label {
  margin: 0 0 8px;
  font: 11px/16px Arial, sans-serif;
  text-align: center;
}
.display-ad-slot,
.display-ad-slot iframe {
  display: block;
  box-sizing: content-box;
  width: var(--ad-width);
  height: var(--ad-height);
  border: 0;
}
.display-ad-slot {
  overflow: hidden;
  color: var(--muted, #a7b9bc);
  text-align: center;
  font: 12px/var(--ad-height) Arial, sans-serif;
}
/* On a 320px screen, use the card's outside margins instead of clipping the ad. */
@media (max-width: 351px) {
  .display-ad { margin-inline: calc((100% - var(--ad-width)) / 2); }
}
