/* Ad positions (.ad; --billboard, --mpu, --half): the label over the ad the
   WTM Ads plugin picks, at its format's width, or the house promotion.
*/

.ad{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.ad__label{ font:500 9px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--label); }
.ad__slot{ width:100%; }
.ad--mpu .ad__slot,
.ad--half .ad__slot{ max-width:300px; }
.ad--billboard .ad__slot{ max-width:970px; }

/* the ad: its image at the position's width */
.ad__slot--creative a{ display:block; }
.ad__slot--creative img{ display:block; width:100%; height:auto; }
/* a billboard with a phone version shows it at MPU width on phones */
@media (max-width:720px){
  .ad--billboard .ad__slot--creative:has(picture){ max-width:300px; }
}

/* house promotion filling the half-page position */
.ad__slot--house{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  aspect-ratio:300 / 600; padding:32px 28px; text-align:center; background:var(--paper-alt);
}
.house__cover{ width:68%; height:auto; box-shadow:var(--shadow-cover); transition:transform .8s var(--ease-out); }
.ad__slot--house:hover .house__cover{ transform:translateY(-4px); }
.house__line{ font:italic 400 24px/1.25 var(--serif); color:var(--text); text-wrap:balance; }