/* Intrinsic attributes reserve image aspect ratios; authored layout rules still win. */
:where(img) { width: auto; height: auto; }
:where(img[data-layout-width="160"]) { width: 160px; }
:where(img[data-layout-width="200"]) { width: 200px; }
:where(img[data-layout-width="300"]) { width: 300px; }
:where(img[data-layout-width="400"]) { width: 400px; }
:where(img[data-layout-width="600"]) { width: 600px; }
:where(img[data-layout-height="32"]) { height: 32px; }
:where(img[data-layout-height="38"]) { height: 38px; }
:where(img[data-layout-height="200"]) { height: 200px; }
:where(img[data-layout-height="225"]) { height: 225px; }
:where(img[data-layout-height="300"]) { height: 300px; }
:where(img[data-layout-height="400"]) { height: 400px; }
:where(img[data-layout-height="413"]) { height: 413px; }
:where(img[data-layout-height="450"]) { height: 450px; }
:where(img[data-layout-height="900"]) { height: 900px; }

/* Controls are created only when JavaScript can operate the media. */
.media-toggle { position: absolute; right: 16px; bottom: 16px; z-index: 5; padding: 10px 14px; border: 1px solid white; border-radius: 4px; color: white; background: #0a1628; font: 500 12px/1.4 Inter, sans-serif; cursor: pointer; }
.media-toggle:focus-visible { outline: 3px solid white; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .deep-dive__media-video { transition: none; }
}