diff --git a/christmas/default.html b/christmas/default.html
index cd0ad35..7a65e0d 100644
--- a/christmas/default.html
+++ b/christmas/default.html
@@ -171,13 +171,13 @@
             If you want more recommendations of different styles, let us know.
         </p>
         <div class="row">
-            <div class="col-4 col">
+            <div class="sm-12 md-4 col">
             <iframe src="https://www.youtube.com/embed/KDH9yvnYT0o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
             </div>
-            <div class="col-4 col">
+            <div class="sm-12 md-4 col">
             <iframe src="https://www.youtube.com/embed/pzwDjMZwrXE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
             </div>
-            <div class="col-4 col">
+            <div class="sm-12 md-4 col">
             <iframe src="https://www.youtube.com/embed/ZSSC9X_6wo4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
             </div>
         </div>
@@ -191,7 +191,7 @@
         </p>
 
         <div class="row">
-            <div class="col-6 col">
+            <div class="md-6 sm-12 col">
                 <div class="card margin">
                     <iframe src="https://www.youtube.com/embed/_PRk8DH2_mY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     <div class="card-body">
@@ -204,7 +204,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-6 col">
+            <div class="md-6 sm-12 col">
                 <div class="card margin">
                     <iframe src="https://www.youtube.com/embed/KFcUwNl7eXo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     <div class="card-body">
@@ -216,7 +216,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-6 col">
+            <div class="md-6 sm-12 col">
                 <div class="card margin">
                     <iframe src="https://www.youtube.com/embed/Ez_VWhR2Hkw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     <div class="card-body">
@@ -230,7 +230,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-6 col">
+            <div class="md-6 sm-12 col">
                 <div class="card margin">
                     <iframe src="https://www.youtube.com/embed/r2-X10IYC3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                     <div class="card-body">
@@ -344,7 +344,7 @@
             though it was very difficult to narrow it down.
         </p>
         <div class="row">
-            <div class="col-6 col">
+            <div class="md-6 sm-12 col">
                 <div class="card">
                     <div class="card-body">
                         <h3 class="card-title">Maria</h3>
@@ -353,7 +353,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-6 col">
+            <div class="md-6 sm-12 col">
                 <div class="card">
                     <div class="card-body">
                         <h3 class="card-title">Chris</h3>