diff --git a/assets/global/localization.js b/assets/global/localization.js
index 82d1ca7..15cebf4 100644
--- a/assets/global/localization.js
+++ b/assets/global/localization.js
@@ -569,6 +569,76 @@ const translations = {
         kontrib_guideline_3: "Sertakan fakta dan data yang akurat dan dapat diverifikasi.",
         kontrib_guideline_4: "Hindari plagiarisme. Karya harus orisinal.",
         kontrib_guideline_5: "Tim redaksi berhak menyunting konten untuk keperluan editorial.",
+
+        grp_limaem_hero_badge: "KOMUNITAS & KEPEMIMPINAN",
+        grp_limaem_hero_title: "Kehidupan Mahasiswa & Himpunan (HMIF)",
+        grp_limaem_hero_desc: "Membangun ekosistem kolaboratif di mana teknologi bertemu dengan kreativitas, membentuk calon pemimpin industri masa depan.",
+        grp_limaem_hero_btn: "Lihat Struktur Kepengurusan",
+
+        grp_limaem_about_title: "Ruang Tumbuh Bagi Mahasiswa Informatika",
+        grp_limaem_about_p1: "Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa pendidikan formal adalah fondasi, namun komunitas adalah akselerator.",
+        grp_limaem_about_p2: "Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan dan integritas ilmiah.",
+        grp_limaem_about_stat_students: "Mahasiswa Aktif",
+        grp_limaem_about_stat_partners: "MITRA",
+        grp_limaem_about_badge: "Inklusivitas & Kolaborasi",
+ 
+        grp_limaem_partners_title: "Partner dan Kolaborator",
+ 
+        grp_limaem_divisi_title: "Divisi Kepengurusan HMIF",
+        grp_limaem_divisi_desc: "Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai bidang strategis.",
+        grp_limaem_divisi_b1_label: "Bidang 1",
+        grp_limaem_divisi_b1_title: "Pengembangan Sumber Daya Mahasiswa dan Kaderisasi",
+        grp_limaem_divisi_b1_desc: "Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru, workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih tanggung jawab sosial. Fokusnya adalah menyiapkan kader yang kompeten dan menjaga regenerasi organisasi.",
+        grp_limaem_divisi_b2_label: "Bidang 2",
+        grp_limaem_divisi_b2_title: "Media Komunikasi dan Konten Digital",
+        grp_limaem_divisi_b2_desc: "Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan identitas digital agar informasi organisasi tersampaikan konsisten dan menarik.",
+        grp_limaem_divisi_b3_label: "Bidang 3",
+        grp_limaem_divisi_b3_title: "Inovasi dan Kompetisi Teknologi",
+        grp_limaem_divisi_b3_desc: "Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal, bimbingan kompetitif, dan inisiatif digitalisasi seperti pengembangan website dan dashboard untuk mendukung ekosistem inovasi HMIF.",
+        grp_limaem_divisi_b4_label: "Bidang 4",
+        grp_limaem_divisi_b4_title: "Pengembangan Organisasi",
+        grp_limaem_divisi_b4_desc: "Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan kegiatan peningkatan profesionalisme sehingga operasi HMIF menjadi lebih terstruktur dan efisien.",
+        grp_limaem_divisi_b5_label: "Bidang 5",
+        grp_limaem_divisi_b5_title: "Sosial Masyarakat",
+        grp_limaem_divisi_b5_desc: "Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi dampak untuk memastikan keberlanjutan dan manfaat nyata bagi masyarakat.",
+        grp_limaem_divisi_b6_label: "Bidang 6",
+        grp_limaem_divisi_b6_title: "Kewirausahaan dan Kemitraan",
+        grp_limaem_divisi_b6_desc: "Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif, dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan pengelolaan sponsor untuk meningkatkan kemandirian finansial dan akses jaringan profesional.",
+ 
+        grp_limaem_kegiatan_title: "Kegiatan Unggulan",
+        grp_limaem_kegiatan_subtitle: "Kegiatan tahunan yang menjadi ikon Informatika UNTAN.",
+        grp_limaem_kegiatan_c1_title: "Silaturahmi Keluarga Besar Informatika",
+        grp_limaem_kegiatan_c1_desc: "Kegiatan buka bersama seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.",
+        grp_limaem_kegiatan_c2_title: "GEMASTIK",
+        grp_limaem_kegiatan_c2_desc: "Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. Wadah bagi mahasiswa Informatika UNTAN untuk unjuk gigi di bidang programming, cyber security, data mining, hingga UI/UX.",
+        grp_limaem_kegiatan_c3_title: "Perayaan 17 Agustus",
+        grp_limaem_kegiatan_c3_desc: "Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik. Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.",
+        grp_limaem_kegiatan_c4_title: "Bootcamp HMIF",
+        grp_limaem_kegiatan_c4_desc: "Program intensif pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari industri.",
+        grp_limaem_kegiatan_c5_title: "UPC",
+        grp_limaem_kegiatan_c5_desc: "Kompetisi Pemograman untuk mengasah skill coding mahasiswa Informatika.",
+        grp_limaem_kegiatan_c6_title: "INFORMERS",
+        grp_limaem_kegiatan_c6_desc: "Perayaan ulang tahun Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar Informatika.",
+ 
+        grp_limaem_sc_title: "STUDY CLUB",
+        grp_limaem_sc_arise_title: "ARISE",
+        grp_limaem_sc_arise_desc: "Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang mengikuti kompetisi pemrograman di berbagai level.",
+        grp_limaem_sc_minerva_title: "MINERVA",
+        grp_limaem_sc_minerva_desc: "Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan algoritma Machine Learning, membedah teknik klasifikasi, hingga melatih model prediktif untuk menghasilkan insight yang bermakna.",
+        grp_limaem_sc_sd_title: "Software Development (Segera Hadir)",
+        grp_limaem_sc_sd_desc: "Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang frontend yang interaktif, membangun backend yang tangguh, serta mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.",
+ 
+        grp_limaem_galeri_title: "Galeri Keseruan",
+ 
+        grp_limaem_cta_title: "Ada yang Ingin Ditanyakan Seputar HMIF?",
+        grp_limaem_cta_desc: "Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan menciptakan dampak nyata.",
+        grp_limaem_cta_btn: "Hubungi Kami",
+        grp_limaem_cta_info1_label: "Sekretariat",
+        grp_limaem_cta_info1_val: "Gedung Fakultas Teknik Lt. 2, Jl. Prof. Dr. H. Hadari Nawawi",
+        grp_limaem_cta_info2_label: "Jam Operasional",
+        grp_limaem_cta_info2_val: "Senin - Jumat, 08:00 - 17:00 WIB",
+        grp_limaem_cta_info3_label: "Media Sosial",
+        grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
     },
 
     en: {
@@ -1135,6 +1205,76 @@ const translations = {
         kontrib_guideline_3: "Include accurate and verifiable facts and data.",
         kontrib_guideline_4: "Avoid plagiarism. Work must be original.",
         kontrib_guideline_5: "The editorial team reserves the right to edit content for editorial purposes.",
+
+        grp_limaem_hero_badge: "COMMUNITY & LEADERSHIP",
+        grp_limaem_hero_title: "Student Life & Student Association (HMIF)",
+        grp_limaem_hero_desc: "Building a collaborative ecosystem where technology meets creativity, shaping the industry leaders of tomorrow.",
+        grp_limaem_hero_btn: "View Organizational Structure",
+
+        grp_limaem_about_title: "A Space to Grow for Informatics Students",
+        grp_limaem_about_p1: "The Informatics Student Association (HMIF) of Tanjungpura University is more than just an organization — it is a home for technology leaders. We believe that formal education is the foundation, but community is the accelerator.",
+        grp_limaem_about_p2: "Through various initiatives, we bridge the gap between academic curriculum and industry needs, while maintaining the spirit of kinship and academic integrity.",
+        grp_limaem_about_stat_students: "Active Students",
+        grp_limaem_about_stat_partners: "PARTNERS",
+        grp_limaem_about_badge: "Inclusivity & Collaboration",
+ 
+        grp_limaem_partners_title: "Partners and Collaborators",
+ 
+        grp_limaem_divisi_title: "HMIF Organizational Divisions",
+        grp_limaem_divisi_desc: "An organizational structure designed for efficiency and capacity building across various strategic fields.",
+        grp_limaem_divisi_b1_label: "Division 1",
+        grp_limaem_divisi_b1_title: "Student Development and Cadre Regeneration",
+        grp_limaem_divisi_b1_desc: "This division organizes structured cadre programs, regular mentoring, and leadership and soft-skill training. Its activities include new member onboarding, leadership workshops, collaborative projects, and community service that fosters social responsibility. The focus is on preparing competent cadres and sustaining organizational regeneration.",
+        grp_limaem_divisi_b2_label: "Division 2",
+        grp_limaem_divisi_b2_title: "Communication Media and Digital Content",
+        grp_limaem_divisi_b2_desc: "This division manages HMIF's communication strategy and content production, including editorial planning, social media management, and event documentation. Its work programs include creating promotional materials, publishing activities, and strengthening digital identity to deliver consistent and engaging organizational information.",
+        grp_limaem_divisi_b3_label: "Division 3",
+        grp_limaem_divisi_b3_title: "Innovation and Technology Competition",
+        grp_limaem_divisi_b3_desc: "This division facilitates competition preparation and technical project development through coaching clinics, project-based bootcamps, and study clubs for Competitive Programming, Software Development, and Data/ML. Activities include internal selection, competitive coaching, and digitalization initiatives such as website and dashboard development to support HMIF's innovation ecosystem.",
+        grp_limaem_divisi_b4_label: "Division 4",
+        grp_limaem_divisi_b4_title: "Organizational Development",
+        grp_limaem_divisi_b4_desc: "This division strengthens internal governance and capabilities through board training, simple SOP drafting, and work process evaluation. Its programs include organizational culture development, improved coordination effectiveness, and professionalism initiatives, making HMIF operations more structured and efficient.",
+        grp_limaem_divisi_b5_label: "Division 5",
+        grp_limaem_divisi_b5_title: "Community Engagement",
+        grp_limaem_divisi_b5_desc: "This division designs and implements impactful community service programs and social actions, including community assistance and humanitarian aid. Activities cover field needs assessment, structured implementation, and impact evaluation to ensure sustainability and tangible benefits for the community.",
+        grp_limaem_divisi_b6_label: "Division 6",
+        grp_limaem_divisi_b6_title: "Entrepreneurship and Partnerships",
+        grp_limaem_divisi_b6_desc: "This division develops organizational business units, designs creative funding schemes, and establishes strategic partnerships to support the sustainability of HMIF programs. Its work units include business opportunity research, partnership proposal development, and sponsorship management to enhance financial independence and professional networking access.",
+ 
+        grp_limaem_kegiatan_title: "Flagship Events",
+        grp_limaem_kegiatan_subtitle: "Annual events that have become icons of Informatics UNTAN.",
+        grp_limaem_kegiatan_c1_title: "Informatics Family Gathering",
+        grp_limaem_kegiatan_c1_desc: "An annual iftar gathering held with the entire Informatics UNTAN family, a tradition maintained every year.",
+        grp_limaem_kegiatan_c2_title: "GEMASTIK",
+        grp_limaem_kegiatan_c2_desc: "A prestigious national-level IT competition held annually by the Ministry. A platform for Informatics UNTAN students to showcase their skills in programming, cyber security, data mining, and UI/UX.",
+        grp_limaem_kegiatan_c3_title: "Independence Day Celebration",
+        grp_limaem_kegiatan_c3_desc: "A celebration of Indonesian Independence Day filled with exciting competitions. A fun event to strengthen nationalism and the sense of kinship among Informatics students.",
+        grp_limaem_kegiatan_c4_title: "HMIF Bootcamp",
+        grp_limaem_kegiatan_c4_desc: "An intensive technical skill development program for Informatics students, guided by professional mentors from the industry.",
+        grp_limaem_kegiatan_c5_title: "UPC",
+        grp_limaem_kegiatan_c5_desc: "A Programming Competition to sharpen the coding skills of Informatics students.",
+        grp_limaem_kegiatan_c6_title: "INFORMERS",
+        grp_limaem_kegiatan_c6_desc: "The anniversary celebration of Informatics UNTAN, a moment of togetherness and pride for the entire Informatics family.",
+ 
+        grp_limaem_sc_title: "STUDY CLUBS",
+        grp_limaem_sc_arise_title: "ARISE",
+        grp_limaem_sc_arise_desc: "Learn logic and algorithms together, where you can grow and open opportunities to participate in programming competitions at various levels.",
+        grp_limaem_sc_minerva_title: "MINERVA",
+        grp_limaem_sc_minerva_desc: "Uncover hidden potential from mountains of data! Here we explore Machine Learning algorithms, dissect classification techniques, and train predictive models to generate meaningful insights.",
+        grp_limaem_sc_sd_title: "Software Development (Coming Soon)",
+        grp_limaem_sc_sd_desc: "Turn your ideas into real digital products! We will code together — from designing interactive frontends and building robust backends, to integrating various APIs to create modern web applications.",
+ 
+        grp_limaem_galeri_title: "Fun Gallery",
+ 
+        grp_limaem_cta_title: "Have Questions About HMIF?",
+        grp_limaem_cta_desc: "Join HMIF to expand your network, sharpen your skills, and create real impact.",
+        grp_limaem_cta_btn: "Contact Us",
+        grp_limaem_cta_info1_label: "Secretariat",
+        grp_limaem_cta_info1_val: "Engineering Faculty Building, 2nd Floor, Jl. Prof. Dr. H. Hadari Nawawi",
+        grp_limaem_cta_info2_label: "Office Hours",
+        grp_limaem_cta_info2_val: "Monday - Friday, 08:00 - 17:00 WIB",
+        grp_limaem_cta_info3_label: "Social Media",
+        grp_limaem_cta_info3_val: "@hmif.untan, YouTube: HMIF UNTAN TV",
     }
 };
 
diff --git a/groups/LimaEm/index.html b/groups/LimaEm/index.html
index 8ec845f..1f519b5 100644
--- a/groups/LimaEm/index.html
+++ b/groups/LimaEm/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="id" class="scroll-smooth">
 <head>
     <meta charset="UTF-8">
@@ -292,6 +292,24 @@
             border-right: 1px solid #e2e8f0;
             border-bottom: 1px solid #e2e8f0;
         }
+
+        /* ===== Custom Layout Fixes (Menggantikan arbitrary Tailwind) ===== */
+        @media (min-width: 768px) {
+            /* Fix ukuran 2 card per baris untuk Kegiatan Unggulan */
+            .md-card-half {
+                width: calc(50% - 16px) !important;
+            }
+            /* Fix tinggi grid Galeri Keseruan (Tablet) */
+            .galeri-grid {
+                height: 420px !important;
+            }
+        }
+        @media (min-width: 1024px) {
+            /* Fix tinggi grid Galeri Keseruan (Desktop) */
+            .galeri-grid {
+                height: 500px !important;
+            }
+        }
     </style>
 </head>
 <body class="text-slate-800 antialiased bg-white selection:bg-untan-yellow selection:text-black">
@@ -1140,60 +1158,51 @@
         </div>
     </div>
 
-<main id="main-content" class="min-h-screen bg-white">
-        <div class="container mx-auto px-4 lg:px-8" style="padding-top: calc(88px + 3rem);">
+    <main id="main-content" class="pt-[88px] lg:pt-[160px] min-h-screen bg-white">
+        <div class="container mx-auto px-4 lg:px-8 py-12">
             <div class="mb-8 pb-8 border-b border-slate-200">
                 <span class="bg-untan-yellow text-slate-900 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 inline-block mb-3">Tugas Halaman Statis</span>
                 <h1 class="text-3xl lg:text-4xl font-bold text-slate-900 mb-2">Kehidupan Mahasiswa &amp; Himpunan (HMIF)</h1>
                 <p class="text-slate-500 text-sm">Kelompok 07 &mdash; LIMA EM &nbsp;&middot;&nbsp; Informatika UNTAN 2026</p>
             </div>
-        </div>
-        <div id="assignment-body" class="w-full">
+            <div id="assignment-body" class="prose prose-slate max-w-none">
                 <!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
                 <!-- Hero Section -->
-                <header class="relative w-full min-h-screen flex items-center overflow-hidden" style="padding-top: 92px;">
+                <header class="relative w-full min-h-screen flex items-center overflow-hidden pt-[92px] lg:pt-[118px]">
 
                     <img id="api-hero-bg" src="./assets/images/bg-kehidupan-mahasiswa.png" alt="Foto Kegiatan Mahasiswa"
                         class="absolute inset-0 w-full h-full object-cover z-0" />
 
-                    <!-- Gradient biru ke kanan seperti referensi -->
-                    <div class="absolute inset-0 z-0" style="background: linear-gradient(to right, #003150 0%, rgba(0,49,80,0.85) 40%, rgba(0,49,80,0.4) 65%, transparent 100%);"></div>
+                    <div class="absolute inset-0 bg-gradient-to-r from-hmif-primary via-hmif-primary/80 to-transparent z-0"></div>
 
-                    <div class="relative z-10 w-full" style="max-width: 1280px; margin: 0 auto; padding: 4rem 3rem;">
+                    <div class="relative z-10 max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12 py-16 lg:py-24 w-full">
 
-                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;">
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-                            <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem;">
+                            <div class="flex flex-col items-start text-left space-y-6">
 
-                                <!-- Badge COMMUNITY & LEADERSHIP -->
-                                <div style="background: rgba(254,180,1,0.15); color: #feb401; font-weight: 700; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 9999px; letter-spacing: 0.05em;">
-                                    COMMUNITY &amp; LEADERSHIP
+                                <div data-i18n="grp_limaem_hero_badge"
+                                    class="bg-hmif-secondary/15 text-hmif-secondary font-bold text-xs md:text-sm px-3 py-1 rounded-full">
+                                    COMMUNITY & LEADERSHIP
                                 </div>
 
-                                <!-- Heading -->
-                                <h1 style="font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 800; color: white; line-height: 1.2; margin: 0;">
-                                    Kehidupan Mahasiswa &amp; <span style="color: #feb401;">Himpunan (HMIF)</span>
+                                <h1 data-i18n="grp_limaem_hero_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-white leading-tight">
+                                    Kehidupan Mahasiswa & <span class="text-hmif-secondary" style="color:var(--color-hmif-secondary)">Himpunan (HMIF)</span>
                                 </h1>
 
-                                <!-- Subtext -->
-                                <p style="font-size: 1rem; color: #d1d5db; font-weight: 300; line-height: 1.75; max-width: 36rem; margin: 0;">
+                                <p data-i18n="grp_limaem_hero_desc" class="text-base md:text-lg text-gray-300 font-light leading-relaxed max-w-xl">
                                     Membangun ekosistem kolaboratif di mana teknologi bertemu dengan
                                     kreativitas, membentuk calon pemimpin industri masa depan.
                                 </p>
 
-                                <!-- Button -->
-                                <button onclick="document.getElementById('divisi')?.scrollIntoView({behavior:'smooth'})"
-                                    style="background: transparent; border: 2px solid white; color: white; font-weight: 700; font-size: 0.9375rem; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; transition: all 0.25s ease; margin-top: 0.5rem;"
-                                    onmouseover="this.style.background='#feb401'; this.style.color='#003150'; this.style.borderColor='#feb401'; this.style.transform='scale(1.04)'; this.style.boxShadow='0 8px 24px rgba(254,180,1,0.35)';"
-                                    onmouseout="this.style.background='transparent'; this.style.color='white'; this.style.borderColor='white'; this.style.transform='scale(1)'; this.style.boxShadow='none';"
-                                    onmousedown="this.style.transform='scale(0.97)';"
-                                    onmouseup="this.style.transform='scale(1.04)';">
+                                <button data-i18n="grp_limaem_hero_btn"
+                                    class="mt-4 bg-transparent border-2 border-white text-white font-bold text-sm md:text-base px-6 py-3 rounded-md hover:bg-hmif-secondary hover:text-hmif-primary hover:border-hmif-secondary transition-all hover:cursor-pointer">
                                     Lihat Struktur Kepengurusan
                                 </button>
 
                             </div>
 
-                            <div></div>
+                            <div class="hidden lg:block"></div>
 
                         </div>
                     </div>
@@ -1201,25 +1210,25 @@
 
                 <!-- About Section -->
                 <section id="about" class="bg-white overflow-hidden">
-                    <div class="w-full px-6 lg:px-16 xl:px-24 pt-20 lg:pt-24 pb-16">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-16 pt-20 lg:pt-24 pb-16">
                         <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start">
 
                             <!-- ─── Left: Text Content ─── -->
                             <div class="flex flex-col gap-8 order-1 lg:pr-6">
 
                                 <!-- Heading -->
-                                <h2 class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
+                                <h2 data-i18n="grp_limaem_about_title" class="text-3xl lg:text-4xl xl:text-5xl font-extrabold text-hmif-primary leading-snug">
                                     Ruang Tumbuh Bagi<br>Mahasiswa Informatika
                                 </h2>
 
                                 <!-- Paragraf -->
                                 <div class="space-y-4 text-gray-500 text-base lg:text-[17px] leading-relaxed">
-                                    <p>
+                                    <p data-i18n="grp_limaem_about_p1">
                                         Himpunan Mahasiswa Informatika (HMIF) Universitas Tanjungpura bukan sekadar
                                         organisasi, melainkan rumah bagi para pemimpin teknologi. Kami percaya bahwa
                                         pendidikan formal adalah fondasi, namun komunitas adalah akselerator.
                                     </p>
-                                    <p>
+                                    <p data-i18n="grp_limaem_about_p2">
                                         Melalui berbagai inisiatif, kami menjembatani kesenjangan antara kurikulum
                                         akademik dan kebutuhan industri, sambil tetap menjaga semangat kekeluargaan
                                         dan integritas ilmiah.
@@ -1228,19 +1237,19 @@
 
                                 <!-- Stats -->
                                 <div class="flex gap-12 lg:gap-16 pt-6 border-t border-gray-100">
-                                    <div class="group cursor-default">
+                                    <div>
                                         <p
-                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
+                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
                                             518</p>
-                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
+                                        <p data-i18n="grp_limaem_about_stat_students" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
                                             Mahasiswa Aktif
                                         </p>
                                     </div>
-                                    <div class="group cursor-default">
+                                    <div>
                                         <p
-                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums transition-transform duration-300 group-hover:scale-110 inline-block">
+                                            class="text-5xl lg:text-6xl xl:text-7xl font-extrabold text-hmif-secondary leading-none tabular-nums">
                                             8</p>
-                                        <p class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3 group-hover:text-hmif-primary transition-colors duration-300">
+                                        <p data-i18n="grp_limaem_about_stat_partners" class="text-xs lg:text-sm font-bold tracking-widest uppercase text-gray-400 mt-3">
                                             MITRA
                                         </p>
                                     </div>
@@ -1248,31 +1257,36 @@
                             </div>
 
                             <!-- ─── Right: Photo ─── -->
-                            <div class="order-2 relative mt-8 lg:mt-0 flex justify-center lg:justify-end">
-                                <!-- Offset shadow block biru tua -->
-                                <div class="absolute inset-0 bg-hmif-primary translate-x-4 translate-y-4 rounded-2xl lg:rounded-3xl z-0 shadow-2xl" style="background-color: #003150;"></div>
+                            <div class="order-2 relative mt-8 lg:mt-0 lg:pl-4">
 
-                                <!-- Frame foto -->
-                                <div class="relative w-full rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default bg-gray-200" style="aspect-ratio: 4/5;">
+                                <!-- Offset shadow block biru tua, posisi % (ikut skala zoom) -->
+                                <div class="absolute top-[4%] left-[8%] right-[-4%] bottom-[-4%]
+                                            bg-hmif-primary rounded-2xl lg:rounded-3xl z-0 shadow-2xl"></div>
+
+                                <!-- Frame foto — overflow hidden, foto full width tanpa crop -->
+                                <div
+                                    class="relative rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl z-10 group cursor-default">
                                     <img src="./assets/images/ruang-tumbuh/ruangtumbuh_foto.jpeg"
-                                        alt="Ruang Tumbuh HMIF Universitas Tanjungpura" 
-                                        class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105" />
+                                        alt="Ruang Tumbuh HMIF Universitas Tanjungpura" class="w-full h-auto block
+                                                transition-transform duration-700 ease-out group-hover:scale-[1.03]" />
                                     <!-- Gradient overlay bawah -->
-                                    <div class="absolute inset-0 transition-opacity duration-500 opacity-70 group-hover:opacity-45" style="background: linear-gradient(to top, rgba(0, 49, 80, 0.45), transparent, transparent);"></div>
+                                    <div class="absolute inset-0
+                                                bg-gradient-to-t from-hmif-primary/45 via-transparent to-transparent
+                                                opacity-70 group-hover:opacity-45 transition-opacity duration-500"></div>
                                 </div>
 
                                 <!-- Badge Inklusivitas & Kolaborasi pojok kiri bawah -->
-                                <div class="absolute z-20 bottom-0 left-0 -translate-x-2 translate-y-4 lg:-translate-x-6 lg:translate-y-6
+                                <div class="absolute z-20 bottom-[-3%] left-[0%]
                                             bg-hmif-secondary text-hmif-primary
                                             rounded-xl px-4 py-3 text-center shadow-2xl
-                                            border-2 border-white/20" style="min-width: 120px; max-width: 140px; background-color: #feb401; color: #003150;">
+                                            border-2 border-white/20" style="min-width: 120px; max-width: 140px;">
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5"
                                         stroke="currentColor" class="w-6 h-6 mx-auto mb-1" aria-hidden="true">
                                         <path stroke-linecap="round" stroke-linejoin="round"
                                             d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197m6.22-7.496a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6-3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-12 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
                                     </svg>
-                                    <p class="text-[11px] lg:text-xs font-bold leading-snug">
-                                        Inklusivitas &amp;<br>Kolaborasi
+                                    <p data-i18n="grp_limaem_about_badge" class="text-[11px] lg:text-xs font-bold leading-snug">
+                                        Inklusivitas &<br>Kolaborasi
                                     </p>
                                 </div>
                             </div>
@@ -1281,48 +1295,28 @@
                     </div>
                 </section>
 
-
                 <!-- Partner & Kolaborator -->
                 <section id="partners" class="bg-white py-16">
-                    <div class="w-full px-6 lg:px-16 xl:px-24">
-                        <h2 class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
+                        <h2 data-i18n="grp_limaem_partners_title" class="text-2xl lg:text-3xl font-extrabold text-gray-900 mb-10">
                             Partner dan Kolaborator
                         </h2>
 
                         <div class="flex flex-wrap gap-6 lg:gap-10 items-center">
                             <!-- Partner Aktif (Terbaru) -->
-                            <div class="relative group flex flex-col items-center gap-2">
-                                <a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
-                                    rel="noopener noreferrer" aria-label="Partner Aktif - Namaku"
-                                    class="block relative">
-                                    <!-- Yellow ring glow on hover -->
-                                    <span class="absolute -inset-1 rounded-full bg-hmif-secondary opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
-                                    <img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku"
-                                        class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
-                                        style="border-color: #feb401;"
-                                        title="Partner Aktif" />
-                                </a>
-                                <!-- Label AKTIF -->
-                                <span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
-                                    style="background-color:#feb401; color:#003150;">AKTIF</span>
-                            </div>
-
+                            <a href="https://www.instagram.com/namakucoffee.id?igsh=MXYyMnI3ZTNmMGxtZQ==" target="_blank"
+                                rel="noopener noreferrer" aria-label="Partner Aktif - Namaku">
+                                <img src="./assets/images/ruang-tumbuh/partner/namaku.jpeg" alt="Namaku" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
+                                            hover:scale-110 transition-transform duration-200 cursor-pointer"
+                                    title="Partner Terbaru" />
+                            </a>
                             <!-- Partner Aktif (Sobat Konveksi) -->
-                            <div class="relative group flex flex-col items-center gap-2">
-                                <a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
-                                    rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi"
-                                    class="block relative">
-                                    <!-- Yellow ring glow on hover -->
-                                    <span class="absolute -inset-1 rounded-full opacity-0 group-hover:opacity-40 transition-opacity duration-300 blur-sm z-0" style="background-color:#feb401;"></span>
-                                    <img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi"
-                                        class="relative z-10 w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 transition-all duration-300 cursor-pointer group-hover:scale-110 group-hover:shadow-xl"
-                                        style="border-color: #feb401;"
-                                        title="Partner Aktif" />
-                                </a>
-                                <!-- Label AKTIF -->
-                                <span class="text-[10px] font-bold tracking-widest uppercase px-2 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-y-1 group-hover:translate-y-0"
-                                    style="background-color:#feb401; color:#003150;">AKTIF</span>
-                            </div>
+                            <a href="https://www.instagram.com/sobat.konveksi?igsh=OWxkZGJtMjhjeDZj" target="_blank"
+                                rel="noopener noreferrer" aria-label="Partner Aktif - Sobat Konveksi">
+                                <img src="./assets/images/ruang-tumbuh/partner/sobatkonveksi.jpeg" alt="Sobat Konveksi" class="w-16 h-16 lg:w-20 lg:h-20 rounded-full object-cover shadow-lg border-4 border-hmif-secondary
+                                            hover:scale-110 transition-transform duration-200 cursor-pointer"
+                                    title="Partner Aktif" />
+                            </a>
 
                             <!-- Partner Lainnya (Legacy) - Tidak bisa diklik, hover ganti warna -->
                             <div class="relative group">
@@ -1355,13 +1349,13 @@
 
                 <!-- Divisi Kepengurusan HMIF Section -->
                 <section id="divisi" class="bg-hmif-primary text-white py-20 lg:py-24">
-                    <div class="w-full px-6 lg:px-16 xl:px-24">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
                         <!-- Header -->
                         <div class="mb-12 md:mb-16 max-w-3xl">
-                            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
+                            <h2 data-i18n="grp_limaem_divisi_title" class="text-3xl md:text-4xl lg:text-5xl font-bold text-hmif-secondary leading-tight mb-4">
                                 Divisi Kepengurusan HMIF
                             </h2>
-                            <p class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
+                            <p data-i18n="grp_limaem_divisi_desc" class="text-base md:text-lg text-slate-300 font-light leading-relaxed">
                                 Struktur organisasi yang dirancang untuk efisiensi dan pengembangan kapasitas anggota di berbagai
                                 bidang strategis.
                             </p>
@@ -1369,18 +1363,18 @@
 
                         <!-- Grid Card Container -->
                         <div
-                            class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden divide-y md:divide-y-0 md:divide-x divide-white/10">
+                            class="border border-white/10 rounded-2xl bg-white/[0.01] backdrop-blur-md grid grid-cols-1 md:grid-cols-3 overflow-hidden">
                             <!-- Bidang 1 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
-                                <span
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span data-i18n="grp_limaem_divisi_b1_label"
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 1
                                 </span>
-                                <h3
+                                <h3 data-i18n="grp_limaem_divisi_b1_title"
                                     class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
                                     Pengembangan Sumber Daya Mahasiswa dan Kaderisasi
                                 </h3>
-                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                <p data-i18n="grp_limaem_divisi_b1_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
                                     Divisi ini menyelenggarakan kaderisasi terstruktur, mentoring berkala, dan pelatihan
                                     kepemimpinan serta soft-skill. Program kerja mencakup onboarding anggota baru,
                                     workshop kepemimpinan, proyek kolaboratif, dan kegiatan pengabdian yang melatih
@@ -1390,16 +1384,16 @@
                             </div>
 
                             <!-- Bidang 2 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
-                                <span
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span data-i18n="grp_limaem_divisi_b2_label"
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 2
                                 </span>
-                                <h3
+                                <h3 data-i18n="grp_limaem_divisi_b2_title"
                                     class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
                                     Media Komunikasi dan Konten Digital
                                 </h3>
-                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                <p data-i18n="grp_limaem_divisi_b2_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
                                     Divisi ini mengelola strategi komunikasi dan produksi konten HMIF, termasuk
                                     perencanaan editorial, manajemen media sosial, serta dokumentasi acara. Program
                                     kerjanya meliputi pembuatan materi promosi, publikasi kegiatan, dan penguatan
@@ -1408,16 +1402,16 @@
                             </div>
 
                             <!-- Bidang 3 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
-                                <span
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span data-i18n="grp_limaem_divisi_b3_label"
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 3
                                 </span>
-                                <h3
+                                <h3 data-i18n="grp_limaem_divisi_b3_title"
                                     class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
                                     Inovasi dan Kompetisi Teknologi
                                 </h3>
-                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                <p data-i18n="grp_limaem_divisi_b3_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
                                     Divisi ini memfasilitasi persiapan lomba dan pengembangan proyek teknis melalui
                                     coaching clinic, bootcamp berbasis proyek, serta study club untuk Competitive
                                     Programming, Software Development, dan Data/ML. Kegiatan termasuk seleksi internal,
@@ -1427,16 +1421,16 @@
                             </div>
 
                             <!-- Bidang 4 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
-                                <span
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span data-i18n="grp_limaem_divisi_b4_label"
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 4
                                 </span>
-                                <h3
+                                <h3 data-i18n="grp_limaem_divisi_b4_title"
                                     class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
                                     Pengembangan Organisasi
                                 </h3>
-                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                <p data-i18n="grp_limaem_divisi_b4_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
                                     Divisi ini memperkuat tata kelola dan kapabilitas internal melalui pelatihan
                                     pengurus, penyusunan SOP sederhana, dan evaluasi proses kerja. Program kerjanya
                                     mencakup pengembangan budaya organisasi, peningkatan efektivitas koordinasi, dan
@@ -1446,16 +1440,16 @@
                             </div>
 
                             <!-- Bidang 5 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
-                                <span
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span data-i18n="grp_limaem_divisi_b5_label"
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 5
                                 </span>
-                                <h3
+                                <h3 data-i18n="grp_limaem_divisi_b5_title"
                                     class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
                                     Sosial Masyarakat
                                 </h3>
-                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                <p data-i18n="grp_limaem_divisi_b5_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
                                     Divisi ini merancang dan melaksanakan program pengabdian serta aksi sosial yang
                                     berdampak, termasuk pendampingan komunitas dan bantuan kemanusiaan. Kegiatan
                                     meliputi identifikasi kebutuhan lapangan, pelaksanaan terstruktur, dan evaluasi
@@ -1464,16 +1458,16 @@
                             </div>
 
                             <!-- Bidang 6 -->
-                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10 hover:bg-white/5 transition-colors duration-300 relative before:absolute before:top-0 before:left-0 before:h-full before:w-0.5 before:bg-hmif-secondary before:scale-y-0 before:origin-top before:transition-transform before:duration-300 hover:before:scale-y-100">
-                                <span
+                            <div class="group flex flex-col space-y-3 cursor-pointer p-8 lg:p-10">
+                                <span data-i18n="grp_limaem_divisi_b6_label"
                                     class="text-hmif-secondary font-bold text-xs md:text-sm tracking-wider uppercase transition-colors duration-300 group-hover:text-amber-300">
                                     Bidang 6
                                 </span>
-                                <h3
+                                <h3 data-i18n="grp_limaem_divisi_b6_title"
                                     class="text-xl md:text-2xl font-bold text-white leading-snug transition-colors duration-300 group-hover:text-hmif-secondary">
                                     Kewirausahaan dan Kemitraan
                                 </h3>
-                                <p class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
+                                <p data-i18n="grp_limaem_divisi_b6_desc" class="text-sm md:text-base text-gray-400 font-light leading-relaxed">
                                     Divisi ini mengembangkan unit usaha organisasi, merancang skema pendanaan kreatif,
                                     dan menjalin kemitraan strategis untuk mendukung keberlanjutan program HMIF. Unit
                                     kerjanya meliputi riset peluang usaha, penyusunan proposal kemitraan, dan
@@ -1487,13 +1481,13 @@
 
                 <!-- Kegiatan Unggulan Section -->
                 <section id="kegiatan-unggulan" class="bg-white py-20 lg:py-24">
-                    <div class="w-full px-6 lg:px-16 xl:px-24 relative">
+                    <div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 relative w-full">
                         <!-- Header -->
                         <div class="mb-12">
-                            <h2 class="text-3xl font-extrabold text-hmif-primary tracking-tight">
+                            <h2 data-i18n="grp_limaem_kegiatan_title" class="text-3xl font-extrabold text-hmif-primary tracking-tight">
                                 Kegiatan Unggulan
                             </h2>
-                            <p class="text-sm text-gray-500 mt-2 font-medium">
+                            <p data-i18n="grp_limaem_kegiatan_subtitle" class="text-sm text-gray-500 mt-2 font-medium">
                                 Kegiatan tahunan yang menjadi ikon Informatika UNTAN.
                             </p>
                         </div>
@@ -1516,7 +1510,7 @@
                                 <div id="slider-track" class="flex gap-8 transition-transform duration-500 ease-in-out">
 
                                     <!-- Card 1 Silaturahmi Keluarga Besar Informatika-->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/SKBI.jpeg" alt="Silaturahmi Keluarga Besar"
@@ -1524,23 +1518,23 @@
                                         </div>
                                         <div class="flex items-start gap-4 mt-6">
                                             <div
-                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm transition-transform duration-300 group-hover:scale-110">
+                                                class="flex-shrink-0 w-14 h-14 bg-hmif-secondary rounded-xl flex flex-col items-center justify-center text-center p-2 shadow-sm">
                                                 <span class="text-lg font-extrabold text-hmif-primary leading-none">27</span>
                                                 <span
                                                     class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Feb</span>
                                             </div>
                                             <div class="space-y-1">
-                                                <h3
-                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors duration-300">
+                                                <h3 data-i18n="grp_limaem_kegiatan_c1_title"
+                                                    class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
                                                     Silaturahmi Keluarga Besar Informatika</h3>
-                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
+                                                <p data-i18n="grp_limaem_kegiatan_c1_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kegiatan buka bersama
                                                     seluruh keluarga Informatika Untan yang selalu diadakan setiap tahunnya.</p>
                                             </div>
                                         </div>
                                     </div>
 
                                     <!-- Card 2 Gemastik -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/gemastik.jpg" alt="Bootcamp HMIF"
@@ -1557,7 +1551,7 @@
                                                 <h3
                                                     class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
                                                     GEMASTIK</h3>
-                                                <p class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. 
+                                                <p data-i18n="grp_limaem_kegiatan_c2_desc" class="text-sm text-gray-500 leading-relaxed font-light"> Ajang kompetisi IT bergengsi tingkat nasional tahunan dari kementerian. 
                                                     Wadah bagi mahasiswa Informatika UNTAN untuk unjuk 
                                                     gigi di bidang <em>programming</em>, <em>cyber security</em>, <em>data mining</em>, hingga UI/UX.
                                                 </p>
@@ -1566,7 +1560,7 @@
                                     </div>
 
                                     <!-- Card 3 17 agustus -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/17-agustus.jpeg" alt="Perayaan 17 Agustus"
@@ -1580,17 +1574,17 @@
                                                     class="text-[8px] font-bold text-hmif-primary uppercase tracking-wider mt-0.5">Agu</span>
                                             </div>
                                             <div class="space-y-1">
-                                                <h3
+                                                <h3 data-i18n="grp_limaem_kegiatan_c3_title"
                                                     class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
                                                     Perayaan 17 Agustus</h3>
-                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
+                                                <p data-i18n="grp_limaem_kegiatan_c3_desc" class="text-sm text-gray-500 leading-relaxed font-light">Momen perayaan Hari Kemerdekaan Indonesia yang diisi dengan berbagai perlombaan menarik.
                                                     Ajang seru-seruan bersama untuk mempererat rasa nasionalisme dan kekeluargaan mahasiswa Informatika.</p>
                                             </div>
                                         </div>
                                     </div>
 
                                     <!-- Card 3 Bootcamp -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
                                             <img src="./assets/images/kegiatan-unggulan/bootcamp.jpeg" alt="Bootcamp HMIF"
@@ -1607,17 +1601,18 @@
                                                 <h3
                                                     class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
                                                     Bootcamp HMIF</h3>
-                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
+                                                <p data-i18n="grp_limaem_kegiatan_c4_desc" class="text-sm text-gray-500 leading-relaxed font-light">Program intensif
                                                     pengembangan skill teknis mahasiswa Informatika bersama mentor profesional dari
                                                     industri.</p>
                                             </div>
                                         </div>
                                     </div>
+
                                     <!-- Card 5 UPC 2025 -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                            <img src="./assets/images/kegiatan-unggulan/upc.jpg" alt="UPC 2025"
+                                            <img src="./assets/images/kegiatan-unggulan/upc.JPG" alt="UPC 2025"
                                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                         </div>
                                         <div class="flex items-start gap-4 mt-6">
@@ -1631,17 +1626,17 @@
                                                 <h3
                                                     class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
                                                     UPC</h3>
-                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
+                                                <p data-i18n="grp_limaem_kegiatan_c5_desc" class="text-sm text-gray-500 leading-relaxed font-light">Kompetisi Pemograman untuk
                                                     mengasah skill coding mahasiswa Informatika.</p>
                                             </div>
                                         </div>
                                     </div>
 
                                     <!-- Card 6 Informers -->
-                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-1 hover:shadow-lg w-full md:w-[calc(50%_-_16px)]">
+                                    <div class="group flex-shrink-0 bg-white rounded-2xl overflow-hidden transition-all duration-300 w-full md-card-half">
                                         <div
                                             class="aspect-video w-full overflow-hidden rounded-2xl shadow-sm border border-gray-100">
-                                            <img src="./assets/images/kegiatan-unggulan/informers.jpg" alt="Ultah Informatika"
+                                            <img src="./assets/images/kegiatan-unggulan/informers.JPG" alt="Ultah Informatika"
                                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                         </div>
                                         <div class="flex items-start gap-4 mt-6">
@@ -1655,7 +1650,7 @@
                                                 <h3
                                                     class="text-lg font-bold text-slate-800 group-hover:text-hmif-primary transition-colors">
                                                     INFORMERS</h3>
-                                                <p class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
+                                                <p data-i18n="grp_limaem_kegiatan_c6_desc" class="text-sm text-gray-500 leading-relaxed font-light">Perayaan ulang tahun
                                                     Informatika UNTAN, momen kebersamaan dan kebanggaan seluruh keluarga besar
                                                     Informatika.</p>
                                             </div>
@@ -1694,7 +1689,7 @@
 
                 <!-- Study Club Section -->
                 <section id="study-clubs" class="bg-[#EEF2FC]/70 py-20 lg:py-24 border-t border-b border-gray-100">
-                    <div class="w-full px-6 lg:px-16 xl:px-24">
+                    <div class="max-w-none mx-auto px-6 lg:px-16 xl:px-24 w-full">
                         <!-- Centered Header -->
                         <div class="text-center max-w-3xl mx-auto mb-16 flex flex-col items-center">
                             <h2 class="text-2xl font-extrabold text-hmif-primary tracking-widest uppercase">
@@ -1707,8 +1702,8 @@
                         <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                             <!-- CP Card -->
                             <div
-                                class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
-                                <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
+                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608]">
                                     <!-- Brackets Icon -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                         stroke="currentColor" class="w-8 h-8">
@@ -1720,7 +1715,7 @@
                                     <h3 class="text-lg font-bold text-hmif-primary">
                                         ARISE
                                     </h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                    <p data-i18n="grp_limaem_sc_arise_desc" class="text-sm text-gray-500 leading-relaxed font-light">
                                         Belajar logika dan algoritma bersama, di mana kalian bisa berkembang dan membuka peluang
                                         mengikuti kompetisi pemrograman di berbagai level.
                                     </p>
@@ -1729,8 +1724,8 @@
 
                             <!-- Data Mining Card -->
                             <div
-                                class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
-                                <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
+                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608]">
                                     <!-- Shield Icon -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                         stroke="currentColor" class="w-8 h-8">
@@ -1742,7 +1737,7 @@
                                     <h3 class="text-lg font-bold text-hmif-primary">
                                         MINERVA
                                     </h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                    <p data-i18n="grp_limaem_sc_minerva_desc" class="text-sm text-gray-500 leading-relaxed font-light">
                                         Gali potensi tersembunyi dari tumpukan data! Di sini kita akan bereksplorasi dengan
                                         algoritma <em>Machine Learning</em>, membedah teknik klasifikasi, hingga melatih model
                                         prediktif untuk menghasilkan <em>insight</em> yang bermakna.
@@ -1751,8 +1746,8 @@
                             </div>
                             <!-- Software Development Card -->
                             <div
-                                class="group bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-xl border border-gray-100/50 hover:border-hmif-secondary/30 hover:-translate-y-2 transition-all duration-300 flex flex-col space-y-6">
-                                <div class="text-[#b48608] group-hover:text-hmif-primary transition-colors duration-300">
+                                class="bg-white p-8 md:p-10 rounded-2xl shadow-sm hover:shadow-md border border-gray-100/50 transition-all duration-300 flex flex-col space-y-6">
+                                <div class="text-[#b48608]">
                                     <!-- Layout Dashboard Icon -->
                                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                         stroke="currentColor" class="w-8 h-8">
@@ -1764,7 +1759,7 @@
                                     <h3 class="text-lg font-bold text-hmif-primary">
                                         Software Development (Soon)
                                     </h3>
-                                    <p class="text-sm text-gray-500 leading-relaxed font-light">
+                                    <p data-i18n="grp_limaem_sc_sd_desc" class="text-sm text-gray-500 leading-relaxed font-light">
                                         Wujudkan idemu jadi produk digital yang nyata! Kita akan ngoding bareng dari merancang
                                         <em>frontend</em> yang interaktif, membangun <em>backend</em> yang tangguh, serta
                                         mengintegrasikan berbagai API untuk menciptakan aplikasi web masa kini.
@@ -1777,11 +1772,11 @@
 
                 <!-- Galeri Keseruan Section -->
                 <section id="galeri" class="bg-white py-20 lg:py-24">
-                    <div class="w-full px-6 lg:px-16 xl:px-24">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
 
                         <!-- Header -->
                         <div class="text-center mb-12">
-                            <h2 class="text-3xl lg:text-4xl font-bold text-hmif-primary">
+                            <h2 data-i18n="grp_limaem_galeri_title" class="text-3xl lg:text-4xl font-bold text-hmif-primary">
                                 Galeri Keseruan
                             </h2>
                         </div>
@@ -1807,118 +1802,71 @@
 
                                     <!-- ====== Slide 1 ====== -->
                                     <div class="flex-shrink-0 w-full">
-                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
-
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
                                             <!-- Foto besar kiri (span 2 baris) -->
-                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00636.jpg" alt="UPC V"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00636.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
                                             <!-- Foto kecil kanan atas 1 -->
-                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/Copy of DSC09492.jpg" alt="Gemastik"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/Copy of DSC09492.JPG" alt="Gemastik" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
                                             <!-- Foto kecil kanan atas 2 -->
-                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
-                                                target="_blank" rel="noopener noreferrer"
-                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/IMG_0204.jpg" alt="INFORMERS"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/IMG_0204.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
                                             <!-- Foto lebar kanan bawah (span 2 kolom) -->
-                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00456.jpg" alt="UPC V"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00456.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
                                         </div>
                                     </div>
 
                                     <!-- ====== Slide 2 ====== -->
                                     <div class="flex-shrink-0 w-full">
-                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
-
-                                            <!-- Foto besar kiri -->
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
                                             <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
-                                                class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSCF8922.jpg"
-                                                    alt="Ulang Tahun Informatika"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                                class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSCF8922.JPG" alt="Ulang Tahun Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
-                                            <!-- Foto kecil kanan atas 1 -->
-                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00091.jpg" alt="UPC V"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
-                                            </a>
-
-                                            <!-- Foto kecil kanan atas 2 -->
                                             <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
-                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC03316.jpg"
-                                                    alt="Silaturahmi Keluarga Besar Informatika"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                                class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00091.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
-                                            <!-- Foto lebar kanan bawah -->
-                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
-                                                target="_blank" rel="noopener noreferrer"
-                                                class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/IMG_5705.jpg" alt="INFORMERS"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC03316.JPG" alt="Silaturahmi Keluarga Besar Informatika" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            </a>
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/IMG_5705.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
                                         </div>
                                     </div>
 
                                     <!-- ====== Slide 3 ====== -->
                                     <div class="flex-shrink-0 w-full">
-                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 h-auto md:h-[420px] lg:h-[500px]">
-
-                                            <!-- Foto besar kiri -->
-                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="block col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00252.jpg" alt="UPC V"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                        <div class="grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 galeri-grid">
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="block w-full h-full col-span-1 row-span-2 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00252.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
-                                            <!-- Foto kecil kanan atas 1 -->
-                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC00519.jpg" alt="UPC V"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC00519.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
-                                            <!-- Foto kecil kanan atas 2 -->
-                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA=="
-                                                target="_blank" rel="noopener noreferrer"
-                                                class="hidden md:block col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/IMG_0030.jpg" alt="INFORMERS"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/informershmif?igsh=MW5odm9pbXN2aThlMA==" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-1 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/IMG_0030.JPG" alt="INFORMERS" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
-                                            <!-- Foto lebar kanan bawah -->
-                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank"
-                                                rel="noopener noreferrer"
-                                                class="hidden md:block col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
-                                                <img src="./assets/images/galeri-keseruan/DSC01002.jpg" alt="UPC V"
-                                                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                                            <a href="https://www.instagram.com/upc.untan?igsh=ZWYzcTh0d2J4MmJx" target="_blank" rel="noopener noreferrer"
+                                                class="hidden md:block w-full h-full col-span-2 row-span-1 overflow-hidden rounded-xl group cursor-pointer">
+                                                <img src="./assets/images/galeri-keseruan/DSC01002.JPG" alt="UPC V" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                                             </a>
-
                                         </div>
                                     </div>
 
@@ -1952,7 +1900,7 @@
 
                 <!-- CTA Section -->
                 <section id="contact-cta" class="bg-[#EEF2FC] py-16 lg:py-20">
-                    <div class="w-full px-6 lg:px-16 xl:px-24">
+                    <div class="max-w-7xl 2xl:max-w-[1440px] mx-auto px-6 lg:px-12">
                         <div
                             class="relative overflow-hidden rounded-[24px] bg-[#082A4B] px-5 py-10 sm:px-8 sm:py-12 lg:px-16 lg:py-14 shadow-[0_24px_70px_rgba(4,17,31,0.32)]">
 
@@ -1962,18 +1910,18 @@
 
                             <div class="relative z-10">
                                 <div class="mx-auto max-w-4xl text-center">
-                                    <h2 class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
+                                    <h2 data-i18n="grp_limaem_cta_title" class="text-2xl sm:text-3xl lg:text-[38px] font-bold leading-tight text-white">
                                         Ada yang Ingin Ditanyakan Seputar HMIF?
                                     </h2>
 
-                                    <p
+                                    <p data-i18n="grp_limaem_cta_desc"
                                         class="mx-auto mt-4 max-w-2xl text-xs sm:text-sm lg:text-[15px] leading-relaxed text-white/72">
                                         Bergabunglah dengan HMIF untuk memperluas jaringan, mengasah skill, dan
                                         menciptakan dampak nyata.
                                     </p>
 
                                     <div class="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row">
-                                        <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer"
+                                        <a href="https://instagram.com/hmif_ftuntan" target="_blank" rel="noopener noreferrer" data-i18n="grp_limaem_cta_btn"
                                             class="inline-flex items-center justify-center rounded-lg bg-hmif-secondary px-6 py-3 text-sm font-bold text-hmif-primary shadow-[0_10px_24px_rgba(245,200,47,0.35)] transition-transform duration-200 hover:-translate-y-0.5">
                                             Hubungi Kami
                                         </a>
@@ -2005,27 +1953,27 @@
                                 <div class="mt-10 border-t border-white/10 pt-8 lg:mt-12 lg:pt-10">
                                     <div class="grid grid-cols-1 gap-8 md:grid-cols-3 md:gap-6">
                                         <div class="text-center md:px-4">
-                                            <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
+                                            <p data-i18n="grp_limaem_cta_info1_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
                                                 Sekretariat
                                             </p>
-                                            <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
+                                            <p data-i18n="grp_limaem_cta_info1_val" class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
                                                 Gedung Fakultas Teknik Lt. 2<br>
                                                 Jl. Prof. Dr. H. Hadari Nawawi
                                             </p>
                                         </div>
 
                                         <div class="text-center md:px-4 md:border-x md:border-white/10">
-                                            <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
+                                            <p data-i18n="grp_limaem_cta_info2_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
                                                 Jam Operasional
                                             </p>
-                                            <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
+                                            <p data-i18n="grp_limaem_cta_info2_val"class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
                                                 Senin - Jumat<br>
                                                 08:00 - 17:00 WIB
                                             </p>
                                         </div>
 
                                         <div class="text-center md:px-4">
-                                            <p class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
+                                            <p data-i18n="grp_limaem_cta_info3_label" class="text-xs font-bold tracking-widest text-hmif-secondary uppercase">
                                                 Media Sosial
                                             </p>
                                             <p class="mt-3 text-xs sm:text-sm leading-relaxed text-white/72">
@@ -2040,6 +1988,7 @@
                     </div>
                 </section>
                 <!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
+            </div>
         </div>
     </main>