diff --git a/assets/css/010_colors.css b/assets/css/010_colors.css
index 96d412a..58e06ba 100644
--- a/assets/css/010_colors.css
+++ b/assets/css/010_colors.css
@@ -27,6 +27,7 @@
   --text-color: var(--text-color-primary);
   --text-color-primary: var(--gray1);
   --text-color-secondary: var(--gray4);
+  --text-color-light: var(--gray5);
 }
 @media (prefers-color-scheme: dark) {
   :root {
diff --git a/assets/css/090_content_headers.css b/assets/css/090_content_headers.css
new file mode 100644
index 0000000..b6bf70b
--- /dev/null
+++ b/assets/css/090_content_headers.css
@@ -0,0 +1,55 @@
+
+.heading,
+.heading__content
+{
+  grid-column: main-start / main-end;
+}
+
+.heading.with-anchor {
+  display: block grid;
+  grid-template-columns: subgrid;
+  grid-column: gutter-left-start / main-end;
+
+  a {
+    transition: 0.3s color;
+  }
+
+  .heading__anchor a {
+    color: transparent;
+  }
+
+  &:hover .heading__anchor a {
+    color: var(--text-color-secondary);
+  }
+
+  .heading__anchor {
+    align-self: center;
+    font-size: 80%;
+    grid-column: gutter-left-start / gutter-left-end;
+    justify-content: center;
+
+    a:hover {
+      color: var(--text-color-link);
+      text-decoration: none;
+      transition: 0.3s color;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .heading.with-anchor {
+    display: flex;
+    gap: var(--space-xs);
+    grid-column: main-start / main-end;
+
+    .heading__anchor {
+      grid-column: auto;
+      font-weight: normal;
+      order: 99;
+
+      a {
+        color: var(--text-color-light);
+      }
+    }
+  }
+}
diff --git a/assets/css/099_content.css b/assets/css/099_content.css
index 74a6634..d6bf309 100644
--- a/assets/css/099_content.css
+++ b/assets/css/099_content.css
@@ -25,27 +25,4 @@
       margin-inline: var(--gutter-width);
     }
   }
-
-  .heading {
-    display: block flex;
-    gap: var(--space-s);
-    grid-column: main-start / main-end;
-  }
-
-  .heading__anchor {
-    align-self: center;
-    color: var(--gray5);
-    font-size: var(--text-m);
-    justify-content: center;
-
-    a {
-      transition: 0.3s color;
-    }
-
-    a:hover {
-      color: var(--text-color);
-      text-decoration: none;
-      transition: 0.3s color;
-    }
-  }
 }
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 6100c83..fa000e4 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -3,9 +3,7 @@
 {{- $hasAnchor := and $pageWantsAnchors $anchorEnabledForThisHeading -}}
 <h{{ .Level }} id="{{ .Anchor }}" class="heading{{ if $hasAnchor }}  with-anchor{{ end }}">
   {{- if $hasAnchor -}}
-    <span class="heading__anchor">
-      <a href="#{{ .Anchor }}">{{ range seq .Level }}#{{ end }}</a>
-    </span>
+    <span class="heading__anchor"><a href="#{{ .Anchor }}">#</a></span>
   {{- end -}}
-  {{ .Text | safeHTML }}
+  <span class="heading__content">{{ .Text | safeHTML }}</span>
 </h{{ .Level }}>