diff --git a/README.md b/README.md
index 479980e9..9901f01e 100644
--- a/README.md
+++ b/README.md
@@ -1187,23 +1187,23 @@ Page status classes:
 Shortcode classes:
 
 <dl>
-    <dt><code>.paige-code</code></dt>
+    <dt><code>.paige-shortcode-code</code></dt>
     <dd>The container element of <code>paige/code</code> shortcodes.</dd>
-    <dt><code>.paige-email</code></dt>
+    <dt><code>.paige-shortcode-email</code></dt>
     <dd>The container element of <code>paige/email</code> shortcodes.</dd>
-    <dt><code>.paige-figure</code></dt>
+    <dt><code>.paige-shortcode-figure</code></dt>
     <dd>The container element of <code>paige/figure</code> shortcodes.</dd>
-    <dt><code>.paige-gallery</code></dt>
+    <dt><code>.paige-shortcode-gallery</code></dt>
     <dd>The container element of <code>paige/gallery</code> shortcodes.</dd>
-    <dt><code>.paige-icon</code></dt>
+    <dt><code>.paige-shortcode-icon</code></dt>
     <dd>The container element of <code>paige/icon</code> shortcodes.</dd>
-    <dt><code>.paige-image</code></dt>
+    <dt><code>.paige-shortcode-image</code></dt>
     <dd>The container element of <code>paige/image</code> shortcodes.</dd>
-    <dt><code>.paige-quote</code></dt>
+    <dt><code>.paige-shortcode-quote</code></dt>
     <dd>The container element of <code>paige/quote</code> shortcodes.</dd>
-    <dt><code>.paige-vimeo</code></dt>
+    <dt><code>.paige-shortcode-vimeo</code></dt>
     <dd>The container element of <code>paige/vimeo</code> shortcodes.</dd>
-    <dt><code>.paige-youtube</code></dt>
+    <dt><code>.paige-shortcode-youtube</code></dt>
     <dd>The container element of <code>paige/youtube</code> shortcodes.</dd>
 </dl>
 
@@ -1262,9 +1262,9 @@ try the following in `yoursite/hugo.toml`:
 style = """
 #paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
 #paige-page-content > img,
-#paige-page-content > .paige-image,
-#paige-page-content > .paige-vimeo,
-#paige-page-content > .paige-youtube { max-width: 100%; }
+#paige-page-content > .paige-shortcode-image,
+#paige-page-content > .paige-shortcode-vimeo,
+#paige-page-content > .paige-shortcode-youtube { max-width: 100%; }
 """
 ```
 
diff --git a/layouts/partials/paige/style.html b/layouts/partials/paige/style.html
index 0866efea..b0dd122a 100644
--- a/layouts/partials/paige/style.html
+++ b/layouts/partials/paige/style.html
@@ -3,16 +3,16 @@
 <style>
 {{ partial "paige/func-include.html" (dict "name" "style-first%s.html" "page" $page) }}
 
-.paige-figure-numbered {
-    counter-increment: paige-figure-numbered;
+.paige-shortcode-figure-numbered {
+    counter-increment: paige-shortcode-figure-numbered;
 }
 
-.paige-figure-numbered > div > figure > figcaption::before {
-    content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered) ": ";
+.paige-shortcode-figure-numbered > div > figure > figcaption::before {
+    content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered) ": ";
 }
 
-.paige-figure-numbered > div > figure > figcaption:empty::before {
-    content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered);
+.paige-shortcode-figure-numbered > div > figure > figcaption:empty::before {
+    content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered);
 }
 
 .paige-header-link {
@@ -26,11 +26,11 @@
     content: "#";
 }
 
-.paige-quote .blockquote-footer {
+.paige-shortcode-quote .blockquote-footer {
     margin-top: 0;
 }
 
-.paige-quote blockquote {
+.paige-shortcode-quote blockquote {
     border-left: 0;
     border-right: 0;
     margin-bottom: 0;
@@ -54,22 +54,22 @@ th {
 }
 
 .paige-row-short:not(:last-child),
-.paige-figure .paige-quote,
-.paige-figure .paige-video,
-.paige-figure .highlight pre.chroma,
-.paige-figure .highlight .chroma pre,
-.paige-figure .paige-quote blockquote,
-.paige-figure figure > div > :last-child,
-.paige-gallery .paige-figure,
-.paige-gallery .paige-image,
+.paige-shortcode-figure .paige-shortcode-quote,
+.paige-shortcode-figure .paige-video,
+.paige-shortcode-figure .highlight pre.chroma,
+.paige-shortcode-figure .highlight .chroma pre,
+.paige-shortcode-figure .paige-shortcode-quote blockquote,
+.paige-shortcode-figure figure > div > :last-child,
+.paige-shortcode-gallery .paige-shortcode-figure,
+.paige-shortcode-gallery .paige-shortcode-image,
 blockquote > p:last-of-type {
     margin-bottom: 0;
 }
 
-.paige-figure,
-.paige-gallery,
-.paige-image,
-.paige-quote,
+.paige-shortcode-figure,
+.paige-shortcode-gallery,
+.paige-shortcode-image,
+.paige-shortcode-quote,
 .paige-row-short:last-child,
 .paige-row-tall,
 .paige-video,
diff --git a/layouts/shortcodes/paige/code.html b/layouts/shortcodes/paige/code.html
index 50c887de..8819e688 100644
--- a/layouts/shortcodes/paige/code.html
+++ b/layouts/shortcodes/paige/code.html
@@ -11,4 +11,4 @@
     {{ $content = htmlUnescape $content }}
 {{ end }}
 
-<div class="paige-code">{{ highlight $content $lang $options }}</div>
+<div class="paige-shortcode-code">{{ highlight $content $lang $options }}</div>
diff --git a/layouts/shortcodes/paige/email.html b/layouts/shortcodes/paige/email.html
index afb23faa..8b358088 100644
--- a/layouts/shortcodes/paige/email.html
+++ b/layouts/shortcodes/paige/email.html
@@ -9,4 +9,4 @@
     {{ errorf "layouts/shortcodes/paige/email.html: no content" }}
 {{ end }}
 
-<span class="paige-email"><a href="" data-a="{{ base64Encode (index (split $address `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split $address `@`) 1) }}" onclick="this.href = 'mailto:' + atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">{{ $content }}</a></span>
+<span class="paige-shortcode-email"><a href="" data-a="{{ base64Encode (index (split $address `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split $address `@`) 1) }}" onclick="this.href = 'mailto:' + atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">{{ $content }}</a></span>
diff --git a/layouts/shortcodes/paige/figure.html b/layouts/shortcodes/paige/figure.html
index 10a4e7f8..a9808cd1 100644
--- a/layouts/shortcodes/paige/figure.html
+++ b/layouts/shortcodes/paige/figure.html
@@ -56,7 +56,7 @@
 
 {{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
 
-<div class="paige-figure {{ if $numbered }} paige-figure-numbered {{ end }}">
+<div class="paige-shortcode-figure {{ if $numbered }} paige-shortcode-figure-numbered {{ end }}">
 <div class="align-items-{{ $vertical }} d-flex {{ with $float }} float-{{ . }} {{ end }} h-100 justify-content-{{ $horizontal }} {{ with $sideMargin }} {{ . }} {{ end }}">
 <figure class="{{ if $table }} d-table {{ end }} mb-0" {{ with $widths }} style="{{ . | safeCSS }}" {{ end }}>
 <div class="d-flex justify-content-{{ $horizontal }} text-{{ $horizontal }}">{{ $content }}</div>
diff --git a/layouts/shortcodes/paige/gallery.html b/layouts/shortcodes/paige/gallery.html
index 2c0c47d3..0bff2aeb 100644
--- a/layouts/shortcodes/paige/gallery.html
+++ b/layouts/shortcodes/paige/gallery.html
@@ -41,7 +41,7 @@
 
 {{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
 
-<div class="paige-gallery">
+<div class="paige-shortcode-gallery">
 {{ if eq $type "grid" }}
 <div class="container-fluid overflow-hidden px-0">
 <div class="align-items-{{ $align }} gx-3 gy-3 justify-content-{{ $justify }} row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6">
diff --git a/layouts/shortcodes/paige/icon.html b/layouts/shortcodes/paige/icon.html
index c0894ad5..5d91f0a4 100644
--- a/layouts/shortcodes/paige/icon.html
+++ b/layouts/shortcodes/paige/icon.html
@@ -10,7 +10,7 @@
 
 {{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
 
-<span class="paige-icon">
+<span class="paige-shortcode-icon">
 {{- with $url -}}
 <a href="{{ . }}" {{ with $target }} target="{{ . }}" {{ end }}>
 {{- end -}}
diff --git a/layouts/shortcodes/paige/image.html b/layouts/shortcodes/paige/image.html
index 4e1dbae3..d23801ee 100644
--- a/layouts/shortcodes/paige/image.html
+++ b/layouts/shortcodes/paige/image.html
@@ -17,7 +17,7 @@
 {{ $title := .Get "title" }}
 {{ $width := .Get "width" }}
 
-<div class="paige-image">
+<div class="paige-shortcode-image">
     {{ partial "paige/image.html" (dict
         "alt" $alt
         "breakpoints" $breakpoints
diff --git a/layouts/shortcodes/paige/quote.html b/layouts/shortcodes/paige/quote.html
index eafa5a78..88458929 100644
--- a/layouts/shortcodes/paige/quote.html
+++ b/layouts/shortcodes/paige/quote.html
@@ -7,7 +7,7 @@
 
 {{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
 
-<div class="paige-quote">
+<div class="paige-shortcode-quote">
 <blockquote class="blockquote">{{ $content }}</blockquote>
 
 {{ with $cite }}
diff --git a/layouts/shortcodes/paige/vimeo.html b/layouts/shortcodes/paige/vimeo.html
index 9b79d62b..6c33955d 100644
--- a/layouts/shortcodes/paige/vimeo.html
+++ b/layouts/shortcodes/paige/vimeo.html
@@ -116,7 +116,7 @@
     {{ $src = print $src "?" . }}
 {{ end }}
 
-<div class="paige-vimeo">
+<div class="paige-shortcode-vimeo">
     {{ partial "paige/video.html" (dict
         "fullscreen" $fullscreen
         "height" $height
diff --git a/layouts/shortcodes/paige/youtube.html b/layouts/shortcodes/paige/youtube.html
index 80de1c77..1ae552f7 100644
--- a/layouts/shortcodes/paige/youtube.html
+++ b/layouts/shortcodes/paige/youtube.html
@@ -70,7 +70,7 @@
     {{ $src = print $src "?" . }}
 {{ end }}
 
-<div class="paige-youtube">
+<div class="paige-shortcode-youtube">
     {{ partial "paige/video.html" (dict
         "fullscreen" $fullscreen
         "height" $height