Challenge 3: Reserve Space for an Ad Slot — Possible Solution
====================================================================

.ad-container {
  min-height: 250px;
  width: 300px;
}

WHY THIS WORKS
--------------
- min-height: 250px reserves exactly the vertical space the ad's known
  dimensions (300×250) will eventually need, immediately upon the
  container rendering — long before the ad network's script has
  actually finished loading and injecting the real ad content into it.
  This directly mirrors the chapter's own ad/embed example
  (".ad-slot { min-height: 250px; }"), applied here to a differently
  named container class.
- width: 300px similarly reserves the correct horizontal space for the
  same known ad dimensions, so the container's box occupies the full
  300×250 footprint from the very first render — matching the "reserve
  space up front" principle the chapter applies uniformly across
  images, ads, and embeds alike.
- Using min-height rather than a fixed height is a deliberate choice
  that also protects against a RELATED problem: if the ad network ever
  serves a slightly taller ad creative than expected, min-height allows
  the container to grow to accommodate it rather than clipping or
  overflowing awkwardly — while still guaranteeing AT LEAST the full
  250px is reserved from the start, which is the actual layout-shift
  risk being addressed here.
- Because this space is reserved by CSS the moment the page renders —
  not determined only once the ad script finishes loading — nothing
  else on the page needs to move once the ad content actually appears
  inside this already-correctly-sized container, exactly the outcome
  the chapter's "reserved space" comparison box describes.