From 79ae665c5a3aa5ff1d92126cc6ac9685260c4108 Mon Sep 17 00:00:00 2001
From: Santiago Fisela <santyfisela@gmail.com>
Date: Sat, 14 Mar 2026 18:27:46 -0300
Subject: [PATCH] Media tab overhaul

---
 index.html    | 64 +++++++++++++++++++++++++++++++++++++--------------
 src/style.css | 48 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 00bb14a..8feb2fe 100644
--- a/index.html
+++ b/index.html
@@ -176,24 +176,54 @@
           </section>
 
           <section class="tab-content" id="media">
-            <div class="home-layout">
-              <div class="features-row" style="flex-wrap: wrap; gap: 10px;">
-                <img src="/Community/image.png"
-                  style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
-                <img src="/Community/image2.png"
-                  style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
-                <img src="/Community/image3.png"
-                  style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
-                <img src="/Community/image4.png"
-                  style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
-                <img src="/Community/image5.png"
-                  style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
-                <img src="/Community/image6.png"
-                  style="width: 31%; border: 2px solid #fff; aspect-ratio: 16/9; object-fit: cover;">
-              </div>
-              <div class="cta-section">
+            <div class="features-layout scroll-content">
+              <div class="overview-box" style="text-align: center;">
                 <h2>Community Gallery</h2>
-                <p>Check out more on our official Discord server.</p>
+                <p>A collection of moments and creations shared by the Emerald Legacy community.</p>
+              </div>
+
+              <div class="gallery-grid">
+                <div class="gallery-item">
+                  <div class="gallery-frame">
+                    <img src="/Community/image.png" alt="Community Shot">
+                  </div>
+                </div>
+                <div class="gallery-item">
+                  <div class="gallery-frame">
+                    <img src="/Community/image2.png" alt="Community Shot">
+                  </div>
+                </div>
+                <div class="gallery-item">
+                  <div class="gallery-frame">
+                    <img src="/Community/image3.png" alt="Community Shot">
+                  </div>
+                </div>
+                <div class="gallery-item">
+                  <div class="gallery-frame">
+                    <img src="/Community/image4.png" alt="Community Shot">
+                  </div>
+                </div>
+                <div class="gallery-item">
+                  <div class="gallery-frame">
+                    <img src="/Community/image5.png" alt="Community Shot">
+                  </div>
+                </div>
+                <div class="gallery-item">
+                  <div class="gallery-frame">
+                    <img src="/Community/image6.png" alt="Community Shot">
+                  </div>
+                </div>
+              </div>
+
+              <div class="content-footer" style="background: #3c3c3c; padding: 20px; border: 4px solid #1a1a1a;">
+                <div class="disclaimer-text">
+                  <h3>Share Your Creations</h3>
+                  <p>Join our Discord to feature your screenshots and videos on our official website!</p>
+                </div>
+                <div class="roadmap-link">
+                  <a href="https://discord.gg/RHGRUwpmVc" class="main-btn"
+                    style="width: 180px; height: 44px; font-size: 1rem;">JOIN DISCORD</a>
+                </div>
               </div>
             </div>
           </section>
diff --git a/src/style.css b/src/style.css
index c124ad8..f82ff0e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -853,4 +853,52 @@ body {
   .os-grid {
     grid-template-columns: 1fr;
   }
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+
+.gallery-item {
+  background: #1a1a1a;
+  padding: 4px;
+  border: 4px solid #7c7c7c;
+  border-right-color: #262626;
+  border-bottom-color: #262626;
+  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+
+.gallery-item:hover {
+  transform: scale(1.05);
+  z-index: 10;
+  outline: 4px solid var(--highlight-yellow);
+}
+
+.gallery-frame {
+  background: #000;
+  border: 4px solid #3c3c3c;
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 16/9;
+}
+
+.gallery-frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+@media (max-width: 900px) {
+  .gallery-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .gallery-grid {
+    grid-template-columns: 1fr;
+  }
 }
\ No newline at end of file