fix: stopped gallery text overlapping with image selection

Author: lillianhidet

src/pages/mahi/index.astro

@@ -116,9 +116,11 @@ const supportResources = [
                 height={400}
               />
               <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
+                <div class="p-3">
                 <h3 class="text-white text-xl font-bold">Community Tech Sessions</h3>
                 <p class="text-white/90">Weekly hands-on learning in your neighborhood</p>
               </div>
+              </div>
             </div>
             <div class="slide">
               <Image
@@ -129,8 +131,10 @@ const supportResources = [
                 height={400}
               />
               <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
-                <h3 class="text-white text-xl font-bold">Interactive Learning</h3>
-                <p class="text-white/90">Student-directed exploration and projects</p>
+                <div class="p-3">
+                <h3 class="text-white text-xl font-bold bottom-2">Interactive Learning</h3>
+                <p class="text-white/90 bottom-2">Student-directed exploration and projects</p>
+                </div>
               </div>
             </div>
             <div class="slide">
@@ -142,8 +146,10 @@ const supportResources = [
                 height={400}
               />
               <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
+                <div class="p-3">
                 <h3 class="text-white text-xl font-bold">Competitions & Events</h3>
                 <p class="text-white/90">Challenges that inspire and connect</p>
+                </div>
               </div>
             </div>
             <div class="slide">
@@ -155,8 +161,10 @@ const supportResources = [
                 height={400}
               />
               <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
+                <div class="p-3">
                 <h3 class="text-white text-xl font-bold">Kaiako Support</h3>
                 <p class="text-white/90">Professional development for educators</p>
+                </div>
               </div>
             </div>