diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 9b21e099..71e8f9c9 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -6293,108 +6293,536 @@ body:has(#menu-controller:checked) {
   margin: 0px !important;
 }
 
-@media (min-width: 853px) {
-  .grid-w10 {
+@media (min-width: 640px) {
+  .sm\:grid-w10 {
     width: calc(10% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w15 {
+  .sm\:grid-w15 {
     width: calc(15% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w20 {
+  .sm\:grid-w20 {
     width: calc(20% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w25 {
+  .sm\:grid-w25 {
     width: calc(25% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w30 {
+  .sm\:grid-w30 {
     width: calc(30% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w33 {
+  .sm\:grid-w33 {
     width: calc(33% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w35 {
+  .sm\:grid-w35 {
     width: calc(35% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w40 {
+  .sm\:grid-w40 {
     width: calc(40% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w45 {
+  .sm\:grid-w45 {
     width: calc(45% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w50 {
+  .sm\:grid-w50 {
     width: calc(50% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w55 {
+  .sm\:grid-w55 {
     width: calc(55% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w60 {
+  .sm\:grid-w60 {
     width: calc(60% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w65 {
+  .sm\:grid-w65 {
     width: calc(65% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w66 {
+  .sm\:grid-w66 {
     width: calc(66% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w70 {
+  .sm\:grid-w70 {
     width: calc(70% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w75 {
+  .sm\:grid-w75 {
     width: calc(75% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w80 {
+  .sm\:grid-w80 {
     width: calc(80% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w85 {
+  .sm\:grid-w85 {
     width: calc(85% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w90 {
+  .sm\:grid-w90 {
     width: calc(90% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w95 {
+  .sm\:grid-w95 {
     width: calc(95% - 5px);
     margin: 0px !important;
   }
 
-  .grid-w100 {
+  .sm\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+
+@media (min-width: 853px) {
+  .md\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+
+  .md\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+
+  .lg\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+
+  .xl\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+
+@media (min-width: 1536px) {
+  .2xl\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+
+  .2xl\:grid-w100 {
     width: calc(100% - 5px);
     margin: 0px !important;
   }
@@ -6420,20 +6848,100 @@ body:has(#menu-controller:checked) {
 
 /* 32:9 Aspect Ratio */
 
-@media (min-width: 853px) {
-  .ratio-16-9 {
+@media (min-width: 640px) {
+  .sm\:ratio-16-9 {
     padding-top: 56.25%;
   }
 
   /* 16:9 Aspect Ratio */
 
-  .ratio-21-9 {
+  .sm\:ratio-21-9 {
     padding-top: 42.85%;
   }
 
   /* 21:9 Aspect Ratio */
 
-  .ratio-32-9 {
+  .sm\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+
+  /* 32:9 Aspect Ratio */
+}
+
+@media (min-width: 853px) {
+  .md\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+
+  /* 16:9 Aspect Ratio */
+
+  .md\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+
+  /* 21:9 Aspect Ratio */
+
+  .md\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+
+  /* 32:9 Aspect Ratio */
+}
+
+@media (min-width: 1024px) {
+  .lg\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+
+  /* 16:9 Aspect Ratio */
+
+  .lg\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+
+  /* 21:9 Aspect Ratio */
+
+  .lg\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+
+  /* 32:9 Aspect Ratio */
+}
+
+@media (min-width: 1280px) {
+  .xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+
+  /* 16:9 Aspect Ratio */
+
+  .xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+
+  /* 21:9 Aspect Ratio */
+
+  .xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+
+  /* 32:9 Aspect Ratio */
+}
+
+@media (min-width: 1536px) {
+  .2xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+
+  /* 16:9 Aspect Ratio */
+
+  .2xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+
+  /* 21:9 Aspect Ratio */
+
+  .2xl\:ratio-32-9 {
     padding-top: 28.125%;
   }
 
diff --git a/assets/css/main.css b/assets/css/main.css
index 4e676a20..5ac7bb23 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -471,28 +471,124 @@ body:has(#menu-controller:checked) {
 .grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
 .grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
 
+@screen sm {
+  .sm\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
+  .sm\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
+  .sm\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
+  .sm\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
+  .sm\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
+  .sm\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
+  .sm\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
+  .sm\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
+  .sm\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
+  .sm\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
+  .sm\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
+  .sm\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
+  .sm\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
+  .sm\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
+  .sm\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
+  .sm\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
+  .sm\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
+  .sm\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
+  .sm\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
+  .sm\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
+  .sm\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
+}
+
 @screen md {
-  .grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
-  .grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
-  .grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
-  .grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
-  .grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
-  .grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
-  .grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
-  .grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
-  .grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
-  .grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
-  .grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
-  .grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
-  .grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
-  .grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
-  .grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
-  .grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
-  .grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
-  .grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
-  .grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
-  .grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
-  .grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
+  .md\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
+  .md\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
+  .md\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
+  .md\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
+  .md\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
+  .md\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
+  .md\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
+  .md\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
+  .md\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
+  .md\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
+  .md\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
+  .md\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
+  .md\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
+  .md\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
+  .md\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
+  .md\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
+  .md\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
+  .md\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
+  .md\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
+  .md\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
+  .md\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
+}
+
+@screen lg {
+  .lg\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
+  .lg\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
+  .lg\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
+  .lg\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
+  .lg\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
+  .lg\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
+  .lg\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
+  .lg\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
+  .lg\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
+  .lg\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
+  .lg\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
+  .lg\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
+  .lg\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
+  .lg\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
+  .lg\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
+  .lg\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
+  .lg\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
+  .lg\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
+  .lg\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
+  .lg\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
+  .lg\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
+}
+
+@screen xl {
+  .xl\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
+  .xl\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
+  .xl\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
+  .xl\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
+  .xl\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
+  .xl\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
+  .xl\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
+  .xl\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
+  .xl\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
+  .xl\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
+  .xl\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
+  .xl\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
+  .xl\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
+  .xl\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
+  .xl\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
+  .xl\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
+  .xl\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
+  .xl\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
+  .xl\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
+  .xl\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
+  .xl\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
+}
+
+@screen 2xl {
+  .2xl\:grid-w10 { width: calc(10% - 5px); margin: 0px !important; }
+  .2xl\:grid-w15 { width: calc(15% - 5px); margin: 0px !important; }
+  .2xl\:grid-w20 { width: calc(20% - 5px); margin: 0px !important; }
+  .2xl\:grid-w25 { width: calc(25% - 5px); margin: 0px !important; }
+  .2xl\:grid-w30 { width: calc(30% - 5px); margin: 0px !important; }
+  .2xl\:grid-w33 { width: calc(33% - 5px); margin: 0px !important; }
+  .2xl\:grid-w35 { width: calc(35% - 5px); margin: 0px !important; }
+  .2xl\:grid-w40 { width: calc(40% - 5px); margin: 0px !important; }
+  .2xl\:grid-w45 { width: calc(45% - 5px); margin: 0px !important; }
+  .2xl\:grid-w50 { width: calc(50% - 5px); margin: 0px !important; }
+  .2xl\:grid-w55 { width: calc(55% - 5px); margin: 0px !important; }
+  .2xl\:grid-w60 { width: calc(60% - 5px); margin: 0px !important; }
+  .2xl\:grid-w65 { width: calc(65% - 5px); margin: 0px !important; }
+  .2xl\:grid-w66 { width: calc(66% - 5px); margin: 0px !important; }
+  .2xl\:grid-w70 { width: calc(70% - 5px); margin: 0px !important; }
+  .2xl\:grid-w75 { width: calc(75% - 5px); margin: 0px !important; }
+  .2xl\:grid-w80 { width: calc(80% - 5px); margin: 0px !important; }
+  .2xl\:grid-w85 { width: calc(85% - 5px); margin: 0px !important; }
+  .2xl\:grid-w90 { width: calc(90% - 5px); margin: 0px !important; }
+  .2xl\:grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
+  .2xl\:grid-w100 { width: calc(100% - 5px); margin: 0px !important; }
 }
 
 /* Carousel Specific Styles */
@@ -500,8 +596,32 @@ body:has(#menu-controller:checked) {
 .ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
 .ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
 
+@screen sm {
+  .sm\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
+  .sm\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+  .sm\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
+}
+
 @screen md {
-  .ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
-  .ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
-  .ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
+  .md\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
+  .md\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+  .md\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
+}
+
+@screen lg {
+  .lg\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
+  .lg\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+  .lg\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
+}
+
+@screen xl {
+  .xl\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
+  .xl\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+  .xl\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
+}
+
+@screen 2xl {
+  .2xl\:ratio-16-9 { padding-top: 56.25%; } /* 16:9 Aspect Ratio */
+  .2xl\:ratio-21-9 { padding-top: 42.85%; } /* 21:9 Aspect Ratio */
+  .2xl\:ratio-32-9 { padding-top: 28.125%; } /* 32:9 Aspect Ratio */
 }
\ No newline at end of file
diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 9c6a4e42..555b995d 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -235,9 +235,9 @@ Blowfish also supports automatic conversion of images included using standard Ma
 
 `gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
 
-In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols.
+In order to add images to the gallery, use `img` tags for each image and add `class="grid-wXX"` in order for the gallery to be able to identify the column width for each image. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`. Additionally, widths for 33% and 66% are also available in order to build galleries with 3 cols. You can also leverage tailwind's responsive indicators to have a reponsive grid.
 
-**Example:**
+**Example 1: normal gallery**
 
 ```md
 {{</* gallery */>}}
@@ -263,6 +263,33 @@ In order to add images to the gallery, use `img` tags for each image and add `cl
 
 <br/><br/><br/>
 
+
+**Example 2: responsive gallery**
+
+```md
+{{</* gallery */>}}
+  <img src="gallery/01.jpg" class="grid-w33" />
+  <img src="gallery/02.jpg" class="grid-w33" />
+  <img src="gallery/03.jpg" class="grid-w33" />
+  <img src="gallery/04.jpg" class="grid-w33" />
+  <img src="gallery/05.jpg" class="grid-w33" />
+  <img src="gallery/06.jpg" class="grid-w33" />
+  <img src="gallery/07.jpg" class="grid-w33" />
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  <img src="gallery/01.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/02.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/03.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/04.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/05.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/06.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+  <img src="gallery/07.jpg" class="grid-w50 md:grid-w33 xl:grid-w25" />
+{{< /gallery >}}
+
+<br/><br/><br/>
+
 ## GitHub Card
 
 `github` allows you to quickly link a github repository, all while showing and updating in realtime stats about it, such as the number of stars and forks it has.