diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 29c869b1..1c4a32e1 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -3789,584 +3789,6 @@ pre {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
-.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;
-}
-@media (width >= 640px) {
-  .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;
-  }
-}
-@media (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 (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 (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 (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;
-  }
-}
-.ratio-16-9 {
-  padding-top: 56.25%;
-}
-.ratio-21-9 {
-  padding-top: 42.85%;
-}
-.ratio-32-9 {
-  padding-top: 28.125%;
-}
-@media (width >= 640px) {
-  .sm\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .sm\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .sm\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 853px) {
-  .md\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .md\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .md\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 1024px) {
-  .lg\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .lg\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .lg\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 1280px) {
-  .xl\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .xl\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .xl\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
-@media (width >= 1536px) {
-  .2xl\:ratio-16-9 {
-    padding-top: 56.25%;
-  }
-  .2xl\:ratio-21-9 {
-    padding-top: 42.85%;
-  }
-  .2xl\:ratio-32-9 {
-    padding-top: 28.125%;
-  }
-}
 @layer base {
   [type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
     appearance: none;
diff --git a/assets/css/components/carousel.css b/assets/css/components/carousel.css
new file mode 100644
index 00000000..9a799e05
--- /dev/null
+++ b/assets/css/components/carousel.css
@@ -0,0 +1,65 @@
+/* Carousel Specific Styles */
+.ratio-16-9 {
+  padding-top: 56.25%;
+}
+.ratio-21-9 {
+  padding-top: 42.85%;
+}
+.ratio-32-9 {
+  padding-top: 28.125%;
+}
+@media (width >= 640px) {
+  .sm\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .sm\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .sm\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 853px) {
+  .md\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .md\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .md\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1024px) {
+  .lg\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .lg\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .lg\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1280px) {
+  .xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1536px) {
+  .\32xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .\32xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .\32xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
diff --git a/assets/css/components/gallery.css b/assets/css/components/gallery.css
new file mode 100644
index 00000000..e9e9616b
--- /dev/null
+++ b/assets/css/components/gallery.css
@@ -0,0 +1,579 @@
+/* Gallery Specific Styles */
+.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;
+}
+@media (width >= 640px) {
+  .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;
+  }
+}
+@media (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 (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 (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 (width >= 1536px) {
+  .\32xl\:grid-w10 {
+    width: calc(10% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w15 {
+    width: calc(15% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w20 {
+    width: calc(20% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w25 {
+    width: calc(25% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w30 {
+    width: calc(30% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w33 {
+    width: calc(33% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w35 {
+    width: calc(35% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w40 {
+    width: calc(40% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w45 {
+    width: calc(45% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w50 {
+    width: calc(50% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w55 {
+    width: calc(55% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w60 {
+    width: calc(60% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w65 {
+    width: calc(65% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w66 {
+    width: calc(66% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w70 {
+    width: calc(70% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w75 {
+    width: calc(75% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w80 {
+    width: calc(80% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w85 {
+    width: calc(85% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w90 {
+    width: calc(90% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w95 {
+    width: calc(95% - 5px);
+    margin: 0px !important;
+  }
+  .\32xl\:grid-w100 {
+    width: calc(100% - 5px);
+    margin: 0px !important;
+  }
+}
+.ratio-16-9 {
+  padding-top: 56.25%;
+}
+.ratio-21-9 {
+  padding-top: 42.85%;
+}
+.ratio-32-9 {
+  padding-top: 28.125%;
+}
+@media (width >= 640px) {
+  .sm\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .sm\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .sm\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 853px) {
+  .md\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .md\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .md\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1024px) {
+  .lg\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .lg\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .lg\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1280px) {
+  .xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
+@media (width >= 1536px) {
+  .\32xl\:ratio-16-9 {
+    padding-top: 56.25%;
+  }
+  .\32xl\:ratio-21-9 {
+    padding-top: 42.85%;
+  }
+  .\32xl\:ratio-32-9 {
+    padding-top: 28.125%;
+  }
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index f15ad75b..6dfa1a7c 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -512,595 +512,3 @@ pre {
   text-decoration-thickness: 3px;
   text-underline-offset: 4px;
 }
-
-/* Gallery Specific Styles */
-.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;
-}
-
-@variant 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;
-  }
-}
-
-@variant md {
-  .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;
-  }
-}
-
-@variant 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;
-  }
-}
-
-@variant 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;
-  }
-}
-
-@variant 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 */
-.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 */
-
-@variant 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 */
-}
-
-@variant md {
-  .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 */
-}
-
-@variant 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 */
-}
-
-@variant 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 */
-}
-
-@variant 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 */
-}
diff --git a/layouts/partials/vendor.html b/layouts/partials/vendor.html
index f76b90fc..9210cc57 100644
--- a/layouts/partials/vendor.html
+++ b/layouts/partials/vendor.html
@@ -60,6 +60,13 @@
 
 {{/* Packery */}}
 {{ if .Page.HasShortcode "gallery" }}
+  {{ $galleryCSS := resources.Get "css/components/gallery.css" }}
+  {{ $galleryCSS = $galleryCSS | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $galleryCSS.RelPermalink }}"
+    integrity="{{ $galleryCSS.Data.Integrity }}">
   {{ $packeryLib := resources.Get "lib/packery/packery.pkgd.min.js" }}
   {{ $packeryLib = $packeryLib | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
   <script
@@ -78,6 +85,13 @@
 
 {{/* tw-elements */}}
 {{ if or (.Page.HasShortcode "carousel") (.Page.HasShortcode "timeline") }}
+  {{ $carouselCSS := resources.Get "css/components/carousel.css" }}
+  {{ $carouselCSS = $carouselCSS | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $carouselCSS.RelPermalink }}"
+    integrity="{{ $carouselCSS.Data.Integrity }}">
   {{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
   {{ $twelementsLib = $twelementsLib | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
   <script