Update style for mobile devices and add bullets

Author: veedata

_includes/grid-gallery.html

@@ -1,23 +1,36 @@
 <div class="glide">
+    {% assign images = site.static_files | where_exp: "file", "file.path contains '/images/main-carousel/'" %}
     <div class="glide__track" data-glide-el="track">
         <ul class="glide__slides">
-            {% assign images = site.static_files | where_exp: "file", "file.path contains '/images/main-carousel/'" %}
             {% for image in images %}
               <li class="glide__slide">
                 <img src="{{ image.path }}" alt="Gallery Image">
               </li>
             {% endfor %}
         </ul>
     </div>
+    <div class="glide__bullets" data-glide-el="controls[nav]">
+        {% for image in images %}
+            <button class="glide__bullet" data-glide-dir="={{forloop.index0}}"></button>
+        {% endfor %}
+    </div>
 </div>
 
 <script>
-    new Glide('.glide', {
+    var glide = new Glide('.glide', {
         type: 'carousel',
         perView: 2,
         autoplay: 5000,
-        gap: 10
-    }).mount();
+        gap: 10,
+        focusAt : 'center',
+        breakpoints: {
+            800: {
+                perView: 1
+            }
+        }
+    })
+    
+    glide.mount();
 </script>
 
 <style>
@@ -31,4 +44,9 @@
         width: 100%;
         height: auto;
     }
+
+    .glide__bullet--active {
+        background-color: #0000003f;
+        border: 2px solid #ffffffbe;
+    }
 </style>