Gallery: distinct album cards, blue tint, hover lift, whole card links to story

- Each album is now a bordered card with a resting shadow and clear separation
- Blue brand tint over the cover photos; fades on hover so images brighten
- Whole card lifts with a stronger shadow on hover (album-level, not per image)
- Clicking anywhere on a card opens the event story page (removed the lightbox)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

mk/gallery/index.html

@@ -195,159 +195,128 @@
             <div class="gallery-hero-inner">
                 <p class="gallery-eyebrow">Моменти од МСОС</p>
                 <h1>Нашите моменти низ годините</h1>
-                <p class="gallery-lead">Поглед наназад кон настаните, дружењата и моментите што ја создаваат заедницата на МСОС. Кликни на албум за да ги разгледаш фотографиите.</p>
+                <p class="gallery-lead">Поглед наназад кон настаните, дружењата и моментите што ја создаваат заедницата на МСОС. Кликни на албум за да ја отвориш приказната и да ги видиш сите фотографии.</p>
             </div>
         </section>
         <section class="gallery-albums">
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-1.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Запознај ја студентска Словенија 2024 — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-2.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-2.webp" alt="Запознај ја студентска Словенија 2024 — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-3.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-3.webp" alt="Запознај ја студентска Словенија 2024 — photo 3"><span class="cover-more-badge">+9</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-4.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-4.webp" alt="Запознај ја студентска Словенија 2024 — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-5.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-5.webp" alt="Запознај ја студентска Словенија 2024 — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-6.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-6.webp" alt="Запознај ја студентска Словенија 2024 — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-7.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-7.webp" alt="Запознај ја студентска Словенија 2024 — photo 7"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-8.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-8.webp" alt="Запознај ја студентска Словенија 2024 — photo 8"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-9.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-9.webp" alt="Запознај ја студентска Словенија 2024 — photo 9"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-10.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-10.webp" alt="Запознај ја студентска Словенија 2024 — photo 10"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-11.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-11.webp" alt="Запознај ја студентска Словенија 2024 — photo 11"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-img-12.webp" data-caption="Запознај ја студентска Словенија 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-12.webp" alt="Запознај ја студентска Словенија 2024 — photo 12"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/meet-student-slovenia-2024/">Запознај ја студентска Словенија 2024</a></h3>
-                    <p class="album-meta"><span>12 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/meet-student-slovenia-2024/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/meet-student-slovenia-2024/" aria-label="Запознај ја студентска Словенија 2024">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Запознај ја студентска Словенија 2024 — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/event4-img-2.webp" alt="Запознај ја студентска Словенија 2024 — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/event4-img-3.webp" alt="Запознај ја студентска Словенија 2024 — photo 3"><span class="cover-more-badge">+9</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Запознај ја студентска Словенија 2024</h3>
+                        <p class="album-meta"><span>12 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-1.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Запознај ја студентска Словенија 2023 — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-2.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-2.webp" alt="Запознај ја студентска Словенија 2023 — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-3.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="Запознај ја студентска Словенија 2023 — photo 3"><span class="cover-more-badge">+7</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-4.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-4.webp" alt="Запознај ја студентска Словенија 2023 — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-5.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Запознај ја студентска Словенија 2023 — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-6.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-6.webp" alt="Запознај ја студентска Словенија 2023 — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-7.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-7.webp" alt="Запознај ја студентска Словенија 2023 — photo 7"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-8.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-8.webp" alt="Запознај ја студентска Словенија 2023 — photo 8"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-9.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-9.webp" alt="Запознај ја студентска Словенија 2023 — photo 9"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event3-photo-10.webp" data-caption="Запознај ја студентска Словенија 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-10.webp" alt="Запознај ја студентска Словенија 2023 — photo 10"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/meet-student-slovenia-2023/">Запознај ја студентска Словенија 2023</a></h3>
-                    <p class="album-meta"><span>10 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/meet-student-slovenia-2023/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/meet-student-slovenia-2023/" aria-label="Запознај ја студентска Словенија 2023">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Запознај ја студентска Словенија 2023 — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/event3-photo-2.webp" alt="Запознај ја студентска Словенија 2023 — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="Запознај ја студентска Словенија 2023 — photo 3"><span class="cover-more-badge">+7</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Запознај ја студентска Словенија 2023</h3>
+                        <p class="album-meta"><span>10 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-1.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-1.webp" alt="Хуманитарен турнир во Марибор — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-2.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-2.webp" alt="Хуманитарен турнир во Марибор — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-3.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-3.webp" alt="Хуманитарен турнир во Марибор — photo 3"><span class="cover-more-badge">+7</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-4.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-4.webp" alt="Хуманитарен турнир во Марибор — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-5.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-5.webp" alt="Хуманитарен турнир во Марибор — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-6.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-6.webp" alt="Хуманитарен турнир во Марибор — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-7.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-7.webp" alt="Хуманитарен турнир во Марибор — photo 7"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-8.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-8.webp" alt="Хуманитарен турнир во Марибор — photo 8"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-9.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-9.webp" alt="Хуманитарен турнир во Марибор — photo 9"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-10.webp" data-caption="Хуманитарен турнир во Марибор"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-10.webp" alt="Хуманитарен турнир во Марибор — photo 10"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/humanitarian-tournament-in-maribor/">Хуманитарен турнир во Марибор</a></h3>
-                    <p class="album-meta"><span>10 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/humanitarian-tournament-in-maribor/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/humanitarian-tournament-in-maribor/" aria-label="Хуманитарен турнир во Марибор">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-1.webp" alt="Хуманитарен турнир во Марибор — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-2.webp" alt="Хуманитарен турнир во Марибор — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-3.webp" alt="Хуманитарен турнир во Марибор — photo 3"><span class="cover-more-badge">+7</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Хуманитарен турнир во Марибор</h3>
+                        <p class="album-meta"><span>10 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-1.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-2.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-2.webp" alt="Македонска студентска вечер во Љубљана — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-3.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Македонска студентска вечер во Љубљана — photo 3"><span class="cover-more-badge">+4</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-4.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-4.webp" alt="Македонска студентска вечер во Љубљана — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-5.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-5.webp" alt="Македонска студентска вечер во Љубљана — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-6.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-6.webp" alt="Македонска студентска вечер во Љубљана — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/msnl-7.webp" data-caption="Македонска студентска вечер во Љубљана"><img loading="lazy" decoding="async" src="../../images/msnl-7.webp" alt="Македонска студентска вечер во Љубљана — photo 7"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/macedonian-student-night-in-ljubljana/">Македонска студентска вечер во Љубљана</a></h3>
-                    <p class="album-meta"><span>7 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/macedonian-student-night-in-ljubljana/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/macedonian-student-night-in-ljubljana/" aria-label="Македонска студентска вечер во Љубљана">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Македонска студентска вечер во Љубљана — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/msnl-2.webp" alt="Македонска студентска вечер во Љубљана — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Македонска студентска вечер во Љубљана — photo 3"><span class="cover-more-badge">+4</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Македонска студентска вечер во Љубљана</h3>
+                        <p class="album-meta"><span>7 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-1.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-1.webp" alt="Сликање и вино на зајдисонце — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-2.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-2.webp" alt="Сликање и вино на зајдисонце — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-3.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-3.webp" alt="Сликање и вино на зајдисонце — photo 3"><span class="cover-more-badge">+6</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-4.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-4.webp" alt="Сликање и вино на зајдисонце — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-5.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-5.webp" alt="Сликање и вино на зајдисонце — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-6.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-6.webp" alt="Сликање и вино на зајдисонце — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-7.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-7.webp" alt="Сликање и вино на зајдисонце — photo 7"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-8.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-8.webp" alt="Сликање и вино на зајдисонце — photo 8"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/paint-wine-9.webp" data-caption="Сликање и вино на зајдисонце"><img loading="lazy" decoding="async" src="../../images/paint-wine-9.webp" alt="Сликање и вино на зајдисонце — photo 9"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/paint-and-wine-at-sunset/">Сликање и вино на зајдисонце</a></h3>
-                    <p class="album-meta"><span>9 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/paint-and-wine-at-sunset/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/paint-and-wine-at-sunset/" aria-label="Сликање и вино на зајдисонце">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/paint-wine-1.webp" alt="Сликање и вино на зајдисонце — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/paint-wine-2.webp" alt="Сликање и вино на зајдисонце — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/paint-wine-3.webp" alt="Сликање и вино на зајдисонце — photo 3"><span class="cover-more-badge">+6</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Сликање и вино на зајдисонце</h3>
+                        <p class="album-meta"><span>9 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-1.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-1.webp" alt="Заедничко гледање ракомет во Словенија — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-2.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-2.webp" alt="Заедничко гледање ракомет во Словенија — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-3.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-3.webp" alt="Заедничко гледање ракомет во Словенија — photo 3"><span class="cover-more-badge">+4</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-4.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-4.webp" alt="Заедничко гледање ракомет во Словенија — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-5.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-5.webp" alt="Заедничко гледање ракомет во Словенија — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-6.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-6.webp" alt="Заедничко гледање ракомет во Словенија — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/handball-2025-7.webp" data-caption="Заедничко гледање ракомет во Словенија"><img loading="lazy" decoding="async" src="../../images/handball-2025-7.webp" alt="Заедничко гледање ракомет во Словенија — photo 7"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/watching-handball-together-in-slovenia/">Заедничко гледање ракомет во Словенија</a></h3>
-                    <p class="album-meta"><span>7 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/watching-handball-together-in-slovenia/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/watching-handball-together-in-slovenia/" aria-label="Заедничко гледање ракомет во Словенија">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/handball-2025-1.webp" alt="Заедничко гледање ракомет во Словенија — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/handball-2025-2.webp" alt="Заедничко гледање ракомет во Словенија — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/handball-2025-3.webp" alt="Заедничко гледање ракомет во Словенија — photo 3"><span class="cover-more-badge">+4</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Заедничко гледање ракомет во Словенија</h3>
+                        <p class="album-meta"><span>7 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image1.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image1.webp" alt="Утринско кафе пред ЦТК — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image2.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Утринско кафе пред ЦТК — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image3.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="Утринско кафе пред ЦТК — photo 3"><span class="cover-more-badge">+4</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image4.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image4.webp" alt="Утринско кафе пред ЦТК — photo 4"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image5.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image5.webp" alt="Утринско кафе пред ЦТК — photo 5"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image6.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image6.webp" alt="Утринско кафе пред ЦТК — photo 6"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/event4-image7.webp" data-caption="Утринско кафе пред ЦТК"><img loading="lazy" decoding="async" src="../../images/event4-image7.webp" alt="Утринско кафе пред ЦТК — photo 7"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/morning-coffee-in-front-of-ctk/">Утринско кафе пред ЦТК</a></h3>
-                    <p class="album-meta"><span>7 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/morning-coffee-in-front-of-ctk/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/morning-coffee-in-front-of-ctk/" aria-label="Утринско кафе пред ЦТК">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/event4-image1.webp" alt="Утринско кафе пред ЦТК — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Утринско кафе пред ЦТК — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="Утринско кафе пред ЦТК — photo 3"><span class="cover-more-badge">+4</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Утринско кафе пред ЦТК</h3>
+                        <p class="album-meta"><span>7 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/frosina-1.webp" data-caption="Во спомен на Фросина Кулакова"><img loading="lazy" decoding="async" src="../../images/frosina-1.webp" alt="Во спомен на Фросина Кулакова — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/frosina-2.webp" data-caption="Во спомен на Фросина Кулакова"><img loading="lazy" decoding="async" src="../../images/frosina-2.webp" alt="Во спомен на Фросина Кулакова — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/frosina-3.webp" data-caption="Во спомен на Фросина Кулакова"><img loading="lazy" decoding="async" src="../../images/frosina-3.webp" alt="Во спомен на Фросина Кулакова — photo 3"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/in-memory-of-frosina-kulakova/">Во спомен на Фросина Кулакова</a></h3>
-                    <p class="album-meta"><span>3 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/in-memory-of-frosina-kulakova/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/in-memory-of-frosina-kulakova/" aria-label="Во спомен на Фросина Кулакова">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/frosina-1.webp" alt="Во спомен на Фросина Кулакова — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/frosina-2.webp" alt="Во спомен на Фросина Кулакова — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/frosina-3.webp" alt="Во спомен на Фросина Кулакова — photo 3"></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Во спомен на Фросина Кулакова</h3>
+                        <p class="album-meta"><span>3 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
             <article class="album-card">
-                <div class="gallery-grid">
-                    <button type="button" class="gallery-thumb" data-full="../../images/kochani-1.webp" data-caption="Во спомен на жртвите во Кочани"><img loading="lazy" decoding="async" src="../../images/kochani-1.webp" alt="Во спомен на жртвите во Кочани — photo 1"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/kochani-2.webp" data-caption="Во спомен на жртвите во Кочани"><img loading="lazy" decoding="async" src="../../images/kochani-2.webp" alt="Во спомен на жртвите во Кочани — photo 2"></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/kochani-3.webp" data-caption="Во спомен на жртвите во Кочани"><img loading="lazy" decoding="async" src="../../images/kochani-3.webp" alt="Во спомен на жртвите во Кочани — photo 3"><span class="cover-more-badge">+1</span></button>
-                    <button type="button" class="gallery-thumb" data-full="../../images/kochani-4.webp" data-caption="Во спомен на жртвите во Кочани"><img loading="lazy" decoding="async" src="../../images/kochani-4.webp" alt="Во спомен на жртвите во Кочани — photo 4"></button>
-                </div>
-                <div class="album-info">
-                    <h3><a href="../../mk/projects/in-memory-of-the-kochani-victims/">Во спомен на жртвите во Кочани</a></h3>
-                    <p class="album-meta"><span>4 фотографии</span><span class="dot" aria-hidden="true"></span><a href="../../mk/projects/in-memory-of-the-kochani-victims/">Прочитај ја приказната</a></p>
-                </div>
+                <a class="album-link-wrap" href="../../mk/projects/in-memory-of-the-kochani-victims/" aria-label="Во спомен на жртвите во Кочани">
+                    <div class="album-cover">
+                        <span class="album-tile album-tile--main"><img loading="lazy" decoding="async" src="../../images/kochani-1.webp" alt="Во спомен на жртвите во Кочани — photo 1"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/kochani-2.webp" alt="Во спомен на жртвите во Кочани — photo 2"></span>
+                        <span class="album-tile"><img loading="lazy" decoding="async" src="../../images/kochani-3.webp" alt="Во спомен на жртвите во Кочани — photo 3"><span class="cover-more-badge">+1</span></span>
+                    </div>
+                    <div class="album-info">
+                        <h3>Во спомен на жртвите во Кочани</h3>
+                        <p class="album-meta"><span>4 фотографии</span><span class="dot" aria-hidden="true"></span><span class="read-link">Прочитај ја приказната</span></p>
+                    </div>
+                </a>
             </article>
         </section>
-        <div class="lightbox" id="gallery-lightbox" aria-hidden="true" role="dialog" aria-label="Photo viewer">
-            <button type="button" class="lightbox-close" aria-label="Close">&times;</button>
-            <button type="button" class="lightbox-prev" aria-label="Previous">&#10094;</button>
-            <img class="lightbox-img" src="" alt="">
-            <button type="button" class="lightbox-next" aria-label="Next">&#10095;</button>
-            <div class="lightbox-caption"></div>
-        </div>
     </main>
 
     <!-- START_FOOTER -->