From 8e93bab9f25a74cebf77c0caf225fefe7f3236d6 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Thu, 10 Oct 2024 23:47:10 -0300
Subject: [PATCH] feat: Update image grid styles for better responsiveness and
 add margin utility class

---
 src/blog/templates/blog/includes/image-grid.html    | 2 +-
 src/brazil_blog/static/css/brazil_blog_compiled.css | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/blog/templates/blog/includes/image-grid.html b/src/blog/templates/blog/includes/image-grid.html
index 8e2de22..af889f8 100644
--- a/src/blog/templates/blog/includes/image-grid.html
+++ b/src/blog/templates/blog/includes/image-grid.html
@@ -4,7 +4,7 @@
 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
     {% for picture in page.gallery_images.all %}
         <div id="{{forloop.counter0}}" class="open-image-modal bg-white rounded-xl overflow-hidden drop-shadow group hover:rotate-3 transition-transform relative cursor-pointer" >
-            {% image picture.image fill-1920x1080-c100 %}
+            {% image picture.image fill-960x540-c100 class="h-full w-full object-cover my-0" %}
             <div class="image-caption text-lg md:text-sm p-2 font-semibold header-text-color w-full h-full absolute hidden top-0 flex-col justify-end bg-gradient-to-t to-transparent from-yellow-500" id="{{forloop.counter0}}">
                 {{picture.caption}}
             </div>
diff --git a/src/brazil_blog/static/css/brazil_blog_compiled.css b/src/brazil_blog/static/css/brazil_blog_compiled.css
index 8603d86..151b56a 100644
--- a/src/brazil_blog/static/css/brazil_blog_compiled.css
+++ b/src/brazil_blog/static/css/brazil_blog_compiled.css
@@ -1524,6 +1524,11 @@ select {
   margin-right: auto;
 }
 
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;