diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 7ca3ba0b..29c869b1 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3746,7 +3746,7 @@ pre {
 [id^="fn"], [id^="fnref"] {
   scroll-margin-top: 145px;
 }
-@screen sm {
+@media (width >= 640px) {
   .thumbnail {
     min-width: 100%;
     height: 180px;
@@ -3755,7 +3755,7 @@ pre {
     flex-wrap: wrap;
   }
 }
-@screen md {
+@media (width >= 853px) {
   .thumbnail {
     min-width: 300px;
     min-height: 180px;
@@ -3873,7 +3873,7 @@ pre {
   width: calc(100% - 5px);
   margin: 0px !important;
 }
-@screen sm {
+@media (width >= 640px) {
   .sm\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -3959,7 +3959,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen md {
+@media (width >= 853px) {
   .md\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4045,7 +4045,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen lg {
+@media (width >= 1024px) {
   .lg\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4131,7 +4131,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen xl {
+@media (width >= 1280px) {
   .xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4217,7 +4217,7 @@ pre {
     margin: 0px !important;
   }
 }
-@screen 2xl {
+@media (width >= 1536px) {
   .2xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -4312,7 +4312,7 @@ pre {
 .ratio-32-9 {
   padding-top: 28.125%;
 }
-@screen sm {
+@media (width >= 640px) {
   .sm\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4323,7 +4323,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen md {
+@media (width >= 853px) {
   .md\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4334,7 +4334,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen lg {
+@media (width >= 1024px) {
   .lg\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4345,7 +4345,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen xl {
+@media (width >= 1280px) {
   .xl\:ratio-16-9 {
     padding-top: 56.25%;
   }
@@ -4356,7 +4356,7 @@ pre {
     padding-top: 28.125%;
   }
 }
-@screen 2xl {
+@media (width >= 1536px) {
   .2xl\:ratio-16-9 {
     padding-top: 56.25%;
   }
diff --git a/assets/css/main.css b/assets/css/main.css
index 89efdc90..f15ad75b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -457,7 +457,7 @@ pre {
   scroll-margin-top: 145px;
 }
 
-@screen sm {
+@variant sm {
   .thumbnail {
     min-width: 100%;
     height: 180px;
@@ -467,7 +467,7 @@ pre {
   }
 }
 
-@screen md {
+@variant md {
   .thumbnail {
     min-width: 300px;
     min-height: 180px;
@@ -599,7 +599,7 @@ pre {
   margin: 0px !important;
 }
 
-@screen sm {
+@variant sm {
   .sm\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -686,7 +686,7 @@ pre {
   }
 }
 
-@screen md {
+@variant md {
   .md\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -773,7 +773,7 @@ pre {
   }
 }
 
-@screen lg {
+@variant lg {
   .lg\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -860,7 +860,7 @@ pre {
   }
 }
 
-@screen xl {
+@variant xl {
   .xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -947,7 +947,7 @@ pre {
   }
 }
 
-@screen 2xl {
+@variant 2xl {
   .2xl\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
@@ -1045,7 +1045,7 @@ pre {
   padding-top: 28.125%;
 } /* 32:9 Aspect Ratio */
 
-@screen sm {
+@variant sm {
   .sm\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1057,7 +1057,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen md {
+@variant md {
   .md\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1069,7 +1069,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen lg {
+@variant lg {
   .lg\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1081,7 +1081,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen xl {
+@variant xl {
   .xl\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */
@@ -1093,7 +1093,7 @@ pre {
   } /* 32:9 Aspect Ratio */
 }
 
-@screen 2xl {
+@variant 2xl {
   .2xl\:ratio-16-9 {
     padding-top: 56.25%;
   } /* 16:9 Aspect Ratio */