From 300144c361290526d591466fd49fa79802ee9c13 Mon Sep 17 00:00:00 2001
From: Elijah Eze Tochukwu
 <129384793+EzeElijahTochukwu@users.noreply.github.com>
Date: Thu, 6 Feb 2025 16:58:43 +0100
Subject: [PATCH] Update index.css

---
 src/index.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/index.css b/src/index.css
index f514d1c..2fcc6fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -109,12 +109,13 @@ main {
 /* Container for the whole services section */
 /* Container for the whole services section */
 /* Container for the whole services section */
+/* Container for the whole services section */
 .services {
   background-color: #f7f7f7;
   padding: 2rem;
   margin: 2rem auto;
   border-radius: 5px 20px 5px;
-  max-width: 1200px; /* Limits the width on large screens */
+  max-width: 1200px; /* Limits the width on larger screens */
 }
 
 /* Our Services heading */
@@ -138,20 +139,19 @@ main {
   }
 }
 
-/* Individual service item as an adaptable square box */
+/* Individual service item that adapts its height to the text content */
 .service {
   background-color: #fff;
   padding: 1rem;
   border-radius: 0px 30px 30px 0px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   
-  /* Force a square shape that scales with its grid cell */
-  aspect-ratio: 1 / 1;
+  /* Remove the fixed aspect ratio so the box adapts to its content */
+  /* Instead of aspect-ratio, we let the content determine the height */
   
-  /* Center the content within the square */
+  /* Optional: Use flexbox to vertically center content if desired */
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
   text-align: center;
 }