style: add responsive CSS for team-member-item and images

css/custom.css

@@ -2659,10 +2659,25 @@ header.main-header .header-sticky.active{
 }
 
 .team-member-item{
-	position: relative;
-	height: calc(100% - 30px);
-	margin-bottom: 30px;
-	z-index: 1;
+  position: relative;
+  height: calc(100% - 30px);
+  margin-bottom: 20px;
+  padding: 15px;
+  z-index: 1;
+}
+
+/* Tablet breakpoint: increase padding for larger screens */
+@media (min-width: 768px) {
+  .team-member-item {
+    padding: 20px;
+  }
+}
+
+/* Desktop breakpoint (1200px+): maximum padding for optimal spacing */
+@media (min-width: 1200px) {
+  .team-member-item {
+    padding: 25px;
+  }
 }
 
 .team-image{
@@ -2674,11 +2689,18 @@ header.main-header .header-sticky.active{
 }
 
 .team-image img{
-	width: 100%;
-	aspect-ratio: 1/1.22;
-	object-fit: cover;
-	border-radius: 0 0 80px 0;
-	transition: all 0.5s ease-in-out;
+  width: 100%;
+  aspect-ratio: 1/1.22;  /* default desktop */
+  object-fit: cover;
+  border-radius: 0 0 80px 0;
+  transition: all 0.5s ease-in-out;
+}
+
+/* Mobile breakpoint (575px and below): square aspect ratio for better fit */
+@media (max-width: 575px) {
+  .team-image img {
+    aspect-ratio: 1/1;  /* square on mobile for better fit */
+  }
 }
 
 .team-member-item:hover .team-image img{