diff --git a/sql/2024/media/video_adoption.sql b/sql/2024/media/video_adoption.sql
index 173f8d0f1ba..f1d797b8dfc 100644
--- a/sql/2024/media/video_adoption.sql
+++ b/sql/2024/media/video_adoption.sql
@@ -1,7 +1,7 @@
 #standardSQL
 # How many pages use <video>?
 # video_adoption.sql
-# â\x9d• Updated in 2024
+# � Updated in 2024
 
 SELECT
   client,
diff --git a/src/content/en/2021/media.md b/src/content/en/2021/media.md
index 6419d5d8678..d4402770d0c 100644
--- a/src/content/en/2021/media.md
+++ b/src/content/en/2021/media.md
@@ -433,19 +433,59 @@ When browsers pick a resource to load out of a `srcset`, they first assign every
 
 On a 500-CSS-`px`-wide viewport, these resources will be assigned the following densities:
 
-| Resource | Density |
-|---|---|
-| `large.jpg` | `1000w` ÷ `500px` = 2x |
-| `medium.jpg` | `750w` ÷ `500px` = 1.5x |
-| `small.jpg` | `500w` ÷ `500px` = 1x |
+<figure>
+  <table>
+    <thead>
+      <tr>
+        <th>Resource</th>
+        <th>Density</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>large.jpg</code></td>
+        <td><code>1000w</code> ÷ <code>500px</code> = 2x</td>
+      </tr>
+      <tr>
+        <td><code>medium.jpg</code></td>
+        <td><code>750w</code> ÷ <code>500px</code> = 1.5x</td>
+      </tr>
+      <tr>
+        <td><code>small.jpg</code></td>
+        <td><code>500w</code> ÷ <code>500px</code> = 1x</td>
+      </tr>
+    </tbody>
+  </table>
+  <figcaption>{{ figure_link(caption="500px densities") }}</figcaption>
+</figure>
 
 However, on a 1000-CSS-`px`-wide viewport, these same resources, marked up with the same `srcset` and `sizes` values, will have different densities:
 
-| Resource | Density |
-|---|---|
-| `large.jpg` | `1000w` ÷ `1000px` = 1x |
-| `medium.jpg` | `750w` ÷ `1000px` = 0.75x |
-| `small.jpg` | `500w` ÷ `1000px` = 0.5x |
+<figure>
+  <table>
+    <thead>
+      <tr>
+        <th>Resource</th>
+        <th>Density</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>large.jpg</code></td>
+        <td><code>1000w</code> ÷ <code>1000px</code> = 1x</td>
+      </tr>
+      <tr>
+        <td><code>medium.jpg</code></td>
+        <td><code>750w</code> ÷ <code>1000px</code> = 0.75x</td>
+      </tr>
+      <tr>
+        <td><code>small.jpg</code></td>
+        <td><code>500w</code> ÷ <code>1000px</code> = 0.5x</td>
+      </tr>
+    </tbody>
+  </table>
+  <figcaption>{{ figure_link(caption="1000px densities") }}</figcaption>
+</figure>
 
 After these densities are calculated, browsers pick the resource with the density that's the best match for the current browsing context. It's safe to say that in this example, the `srcset` did not contain a wide-enough range of resources. Viewports measuring more than 1,000 CSS `px` across, with higher than `1x` densities, are not uncommon; if you're reading this on a laptop, you're probably browsing in such a context, right now. And in these contexts, the best browsers can do is pick `large.jpg`, whose 1x density will still appear blurry on the high-density display.
 
diff --git a/src/content/ja/2021/media.md b/src/content/ja/2021/media.md
index f2fce895b5d..5143a6a12bc 100644
--- a/src/content/ja/2021/media.md
+++ b/src/content/ja/2021/media.md
@@ -433,19 +433,59 @@ WebP�AVIF�採用�時間��も���よ��変化���（�よ
 
 500-CSS-`px` 幅�ビュー�ート����れら�リソース�以下�密度�割り当�られ��。
 
-| リソース | 密度 |
-|---|---|
-| `large.jpg` | `1000w` ÷ `500px` = 2x |
-| `medium.jpg` | `750w` ÷ `500px` = 1.5x |
-| `small.jpg` | `500w` ÷ `500px` = 1x |
+<figure>
+  <table>
+    <thead>
+      <tr>
+        <th>リソース</th>
+        <th>密度</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>large.jpg</code></td>
+        <td><code>1000w</code> ÷ <code>500px</code> = 2x</td>
+      </tr>
+      <tr>
+        <td><code>medium.jpg</code></td>
+        <td><code>750w</code> ÷ <code>500px</code> = 1.5x</td>
+      </tr>
+      <tr>
+        <td><code>small.jpg</code></td>
+        <td><code>500w</code> ÷ <code>500px</code> = 1x</td>
+      </tr>
+    </tbody>
+  </table>
+  <figcaption>{{ figure_link(caption="500px 密度") }}</figcaption>
+</figure>
 
 ����1000-CSS-`px`幅�ビュー�ート�����リソース��� `srcset` � `sizes` 値�マークアップ�れ�異�る密度を������り��。
 
-| リソース | 密度 |
-|---|---|
-| `large.jpg` | `1000w` ÷ `1000px` = 1x |
-| `medium.jpg` | `750w` ÷ `1000px` = 0.75x |
-| `small.jpg` | `500w` ÷ `1000px` = 0.5x |
+<figure>
+  <table>
+    <thead>
+      <tr>
+        <th>リソース</th>
+        <th>密度</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td><code>large.jpg</code></td>
+        <td><code>1000w</code> ÷ <code>1000px</code> = 1x</td>
+      </tr>
+      <tr>
+        <td><code>medium.jpg</code></td>
+        <td><code>750w</code> ÷ <code>1000px</code> = 0.75x</td>
+      </tr>
+      <tr>
+        <td><code>small.jpg</code></td>
+        <td><code>500w</code> ÷ <code>1000px</code> = 0.5x</td>
+      </tr>
+    </tbody>
+  </table>
+  <figcaption>{{ figure_link(caption="1000px 密度") }}</figcaption>
+</figure>
 
 �れら�密度�計算�れ�後�ブラウザ��在�閲覧状��も��もマッ��る密度�リソースを�択���。��例���`srcset`��分�広��リソース���れ�������言��よ���ょ�。CSS�ビュー�ート�1,000pxを超�るも�も�り�1xを超�る密度も������。ノートパソコン��れを読ん��る人��今�����ん�状��閲覧���る����ょ�。������よ��状��ブラウザ���る最善�����`large.jpg`を������。��1��密度��高密度�ディスプレイ�����や��見�る��ょ�。
 
diff --git a/src/static/css/ebook.css b/src/static/css/ebook.css
index 45e638e34c7..6ecef4750dd 100644
--- a/src/static/css/ebook.css
+++ b/src/static/css/ebook.css
@@ -381,6 +381,7 @@ section.chapter {
   }
 
   section h1 {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
     string-set: chapter-title content();
   }
 
@@ -389,6 +390,7 @@ section.chapter {
   }
 
   section.chapter div.subtitle {
+    /* stylelint-disable-next-line declaration-property-value-no-unknown */
     string-set: chapter-subtitle content() " : ";
   }