/* PROMO STRIP: an animated banner inside the content column, scaled to its width like any other block on the page:
   the wide strip (drawn at 1600x400) on desktop, its own phone cut (720x296) at 640px and under, picked by the
   picture's sources. A plain link around an image: no padding to inset, no overflow: hidden, nothing an auto ad can
   be dropped into or clipped by. */
.promo-section .promo-strip {
  display: block;
  width: 100%;
  margin: 18px 0 8px;
  line-height: 0;
  /* The corners of every article image (style.css: section img, 24px) at the column's full 960 x 240, scaling with
     the banner below that: 24px on a phone's short strip made a pill and cut into the characters at the ends. */
  border-radius: 2.5% / 10%;
}

/* (over style.css's article image rule: its 10px top margin and fixed 24px corners) */
.promo-section .promo-strip img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 2.5% / 10%;
}

/* The phone cut is taller for its width (720x296), so the same ~12px corners at a phone's ~358px column are a
   larger share of its width and a smaller share of its height. */
@media (max-width: 640px) {
  .promo-section .promo-strip,
  .promo-section .promo-strip img {
    border-radius: 3.3% / 8%;
  }
}

.promo-section .promo-strip:focus-visible {
  outline: 3px solid #4a90d9;
  outline-offset: 2px;
}