diff --git a/assets/sass/components/talk/slides.sass b/assets/sass/components/slides.sass
similarity index 94%
rename from assets/sass/components/talk/slides.sass
rename to assets/sass/components/slides.sass
index 249939b8..14b50b43 100644
--- a/assets/sass/components/talk/slides.sass
+++ b/assets/sass/components/slides.sass
@@ -1,4 +1,4 @@
-.talk-slides
+.slides
   background: url('../images/loading.gif') center no-repeat
   min-height: 275px
 
diff --git a/assets/sass/site.sass b/assets/sass/site.sass
index d753e499..85173aa3 100644
--- a/assets/sass/site.sass
+++ b/assets/sass/site.sass
@@ -12,8 +12,8 @@
 @import 'components/listing'
 @import 'components/markdown'
 @import 'components/note'
+@import 'components/slides'
 @import 'components/table'
-@import 'components/talk/slides'
 @import 'components/talk/video'
 @import 'components/widget'
 
diff --git a/source/_partials/speakerdeck.html.twig b/source/_partials/speakerdeck.html.twig
index 9fd51d7d..cab3adcb 100644
--- a/source/_partials/speakerdeck.html.twig
+++ b/source/_partials/speakerdeck.html.twig
@@ -1 +1,10 @@
-<script async class="speakerdeck-embed" data-id="{{ data_id }}" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
+<div class="slides">
+    <noscript>**Please enable JavaScript to view slides.**</noscript>
+    <script
+        async
+        class="speakerdeck-embed"
+        data-id="{{ data.id }}"
+        data-ratio="{{ data.ratio ?: '1.29456384323641' }}"
+        src="//speakerdeck.com/assets/embed.js"
+    ></script>
+</div>
diff --git a/source/_partials/talk/slides.html.twig b/source/_partials/talk/slides.html.twig
index f7161f31..6f99d4e8 100644
--- a/source/_partials/talk/slides.html.twig
+++ b/source/_partials/talk/slides.html.twig
@@ -1,8 +1,9 @@
 {% if page.speakerdeck.id and page.speakerdeck.ratio %}
-    <div class="talk-slides mt-4">
+    <div class="mt-4">
         <h2>Slides</h2>
 
-        <noscript>**Please enable JavaScript to view slides.**</noscript>
-        <script async class="speakerdeck-embed" data-id="{{ page.speakerdeck.id }}" data-ratio="{{ page.speakerdeck.ratio }}" src="//speakerdeck.com/assets/embed.js"></script>
+        {% include 'speakerdeck' with {
+            data: page.speakerdeck,
+        } %}
     </div>
 {% endif %}