From 2477af7cc9a27c85762c13ae3569e17a84ae9f00 Mon Sep 17 00:00:00 2001
From: Mircea-Pavel ANTON <contact@mirceanton.com>
Date: Wed, 25 Jan 2023 13:17:19 +0000
Subject: [PATCH] Add mobile styles for the carousel and gallery shortcodes

---
 assets/css/compiled/main.css | 131 +++++++++++++++++++++++++++++++++++
 assets/css/main.css          |  34 ++++++++-
 2 files changed, 164 insertions(+), 1 deletion(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 6a508a6a..c830b1ca 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -6156,6 +6156,8 @@ body:has(#menu-controller:checked) {
   text-underline-offset: 4px;
 }
 
+/* Gallery Specific Styles */
+
 .grid-w10 {
   width: calc(10% - 5px);
   margin: 0px !important;
@@ -6261,6 +6263,115 @@ body:has(#menu-controller:checked) {
   margin: 0px !important;
 }
 
+@media (min-width: 853px) {
+  .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;
+  }
+}
+
+/* Carousel Specific Styles */
+
 .ratio-16-9 {
   padding-top: 56.25%;
 }
@@ -6279,6 +6390,26 @@ body:has(#menu-controller:checked) {
 
 /* 32:9 Aspect Ratio */
 
+@media (min-width: 853px) {
+  .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 */
+}
+
 .first\:mt-8:first-child {
   margin-top: 2rem;
 }
diff --git a/assets/css/main.css b/assets/css/main.css
index 600b64e0..4e676a20 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -448,6 +448,7 @@ body:has(#menu-controller:checked) {
   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; }
@@ -470,6 +471,37 @@ body:has(#menu-controller:checked) {
 .grid-w95 { width: calc(95% - 5px); margin: 0px !important; }
 .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; }
+}
+
+/* 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 */
\ No newline at end of file
+.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 */
+}
\ No newline at end of file