From f959c5e2155864b47d600701de09eaf0327013f3 Mon Sep 17 00:00:00 2001
From: Alham Fikri Aji <afaji321@gmail.com>
Date: Sat, 23 Nov 2024 20:21:24 +0400
Subject: [PATCH] Update group.html

---
 _pages/group.html | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/_pages/group.html b/_pages/group.html
index 3f0c746..4de2c87 100644
--- a/_pages/group.html
+++ b/_pages/group.html
@@ -58,17 +58,25 @@
   }
 
   .card-title {
-    font-size: 0.85rem; /* Smaller font for titles */
+    font-size: 0.75rem; /* Smaller font for titles */
+    font-weight: bold;
   }
 
   .card-text {
-    font-size: 0.7rem; /* Smaller font for details */
+    font-size: 0.6rem; /* Smaller font for details */
+    line-height: 1.2;
   }
 
   a.card-link {
     text-decoration: none;
     color: inherit;
   }
+
+  .image-container {
+    width: 100%;
+    padding-top: 100%; /* Maintains square aspect ratio */
+    position: relative;
+  }
 </style>
 
 <div class="container my-5">
@@ -85,8 +93,8 @@ <h2 class="text-uppercase text-center mb-4">{{ category }}</h2>
           {% for person in people_in_category %}
             <div class="col">
               <a href="{{ person.website }}" class="card-link" target="_blank">
-                <div class="card h-100 text-center border-0 position-relative">
-                  <div style="position: relative; height: 250px;">
+                <div class="card h-100 text-center border-0">
+                  <div class="image-container">
                     <img src="{{ person.photo }}" class="main-photo" alt="{{ person.name }}">
                     {% if person.alt_photo %}
                       <img src="{{ person.alt_photo }}" class="alt-photo" alt="Alternate Photo of {{ person.name }}">
@@ -130,8 +138,8 @@ <h2 class="text-uppercase text-center mb-4">Alumni</h2>
         {% for person in alumni %}
           <div class="col">
             <a href="{{ person.website }}" class="card-link" target="_blank">
-              <div class="card h-100 text-center border-0 position-relative">
-                <div style="position: relative; height: 150px;">
+              <div class="card h-100 text-center border-0">
+                <div class="image-container">
                   <img src="{{ person.photo }}" class="main-photo" alt="{{ person.name }}">
                   {% if person.alt_photo %}
                     <img src="{{ person.alt_photo }}" class="alt-photo" alt="Alternate Photo of {{ person.name }}">