/*
  ad-slot.css
  Placeholder advert boxes: dashed outline, size labelled. Easy to remove.
  The box has a fixed size so the page doesn't jump when the real advert loads.
  Needs css/base.css.
*/

.fm-ad { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; justify-items: center; gap: 0.4rem; max-width: 100%; }
.fm-ad__label { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fm-muted); }
.fm-ad__box {
  display: grid; place-content: center; gap: 0.15rem; max-width: 100%; min-width: 0;
  border: 2px dashed #a9bccb; border-radius: 4px; background: rgba(255, 255, 255, 0.6);
  text-align: center; font-size: var(--fm-t-xs); font-weight: 600; color: var(--fm-muted);
}
.fm-ad__box span:last-child { font-weight: 400; }

/* MPU: 300 x 250 */
.fm-ad--mpu { margin-top: 0; }
.fm-ad--mpu .fm-ad__box { width: 300px; height: 250px; }

/* Leaderboard: 320 x 100 on phones, 728 x 90 from tablet up */
.fm-ad--leaderboard { margin-block: 0 1.25rem; }
.fm-ad--leaderboard .fm-ad__box { width: 320px; height: 100px; }
@media (min-width: 48rem) { .fm-ad--leaderboard .fm-ad__box { width: 728px; height: 90px; } }