Redesign gallery as Pinterest-style album collage cards

- Each album is now a compact collage card (1 large + 2 small photos) with a
  "+N" overlay on the last tile; multiple cards per row (responsive grid)
- Title + photo count + "Read the story" link under each card
- All album photos remain in the DOM (hidden) so the lightbox still browses
  the full set; clicking any tile opens the lightbox at that photo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-03 14:43:04 +02:00
1 parent d085e3376a
commit d048226daf
4 files changed
+219 -190

No files matched your search

+54 -54
View File
@@ -195,19 +195,15 @@
<div class="gallery-hero-inner">
<p class="gallery-eyebrow">MSOS moments</p>
<h1>Our moments through the years</h1>
<p class="gallery-lead">A look back at the events, gatherings and moments that make the MSOS community. Click any photo to view it larger.</p>
<p class="gallery-lead">A look back at the events, gatherings and moments that make the MSOS community. Click an album to browse the photos.</p>
</div>
</section>
<section class="gallery-albums">
<article class="album">
<div class="album-head">
<h2>Meet Student Slovenia 2024</h2>
<a class="album-link" href="../../en/projects/meet-student-slovenia-2024/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-1.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-1.webp" alt="Meet Student Slovenia 2024 — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-2.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-2.webp" alt="Meet Student Slovenia 2024 — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-3.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-3.webp" alt="Meet Student Slovenia 2024 — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-3.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-3.webp" alt="Meet Student Slovenia 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="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-4.webp" alt="Meet Student Slovenia 2024 — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-5.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-5.webp" alt="Meet Student Slovenia 2024 — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-6.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-6.webp" alt="Meet Student Slovenia 2024 — photo 6"></button>
@@ -218,16 +214,16 @@
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-11.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-11.webp" alt="Meet Student Slovenia 2024 — photo 11"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-img-12.webp" data-caption="Meet Student Slovenia 2024"><img loading="lazy" decoding="async" src="../../images/event4-img-12.webp" alt="Meet Student Slovenia 2024 — photo 12"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>Meet Student Slovenia 2023</h2>
<a class="album-link" href="../../en/projects/meet-student-slovenia-2023/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/meet-student-slovenia-2024/">Meet Student Slovenia 2024</a></h3>
<p class="album-meta"><span>12 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/meet-student-slovenia-2024/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-1.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-1.webp" alt="Meet Student Slovenia 2023 — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-2.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-2.webp" alt="Meet Student Slovenia 2023 — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-3.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="Meet Student Slovenia 2023 — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-3.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-3.webp" alt="Meet Student Slovenia 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="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-4.webp" alt="Meet Student Slovenia 2023 — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-5.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-5.webp" alt="Meet Student Slovenia 2023 — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-6.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-6.webp" alt="Meet Student Slovenia 2023 — photo 6"></button>
@@ -236,16 +232,16 @@
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-9.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-9.webp" alt="Meet Student Slovenia 2023 — photo 9"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event3-photo-10.webp" data-caption="Meet Student Slovenia 2023"><img loading="lazy" decoding="async" src="../../images/event3-photo-10.webp" alt="Meet Student Slovenia 2023 — photo 10"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>Humanitarian Tournament in Maribor</h2>
<a class="album-link" href="../../en/projects/humanitarian-tournament-in-maribor/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/meet-student-slovenia-2023/">Meet Student Slovenia 2023</a></h3>
<p class="album-meta"><span>10 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/meet-student-slovenia-2023/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-1.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-1.webp" alt="Humanitarian Tournament in Maribor — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-2.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-2.webp" alt="Humanitarian Tournament in Maribor — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-3.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-3.webp" alt="Humanitarian Tournament in Maribor — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-3.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-3.webp" alt="Humanitarian Tournament in Maribor — 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="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-4.webp" alt="Humanitarian Tournament in Maribor — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-5.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-5.webp" alt="Humanitarian Tournament in Maribor — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-6.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-6.webp" alt="Humanitarian Tournament in Maribor — photo 6"></button>
@@ -254,31 +250,31 @@
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-9.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-9.webp" alt="Humanitarian Tournament in Maribor — photo 9"></button>
<button type="button" class="gallery-thumb" data-full="../../images/maribor-tournament-10.webp" data-caption="Humanitarian Tournament in Maribor"><img loading="lazy" decoding="async" src="../../images/maribor-tournament-10.webp" alt="Humanitarian Tournament in Maribor — photo 10"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>Macedonian Student Night in Ljubljana</h2>
<a class="album-link" href="../../en/projects/macedonian-student-night-in-ljubljana/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/humanitarian-tournament-in-maribor/">Humanitarian Tournament in Maribor</a></h3>
<p class="album-meta"><span>10 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/humanitarian-tournament-in-maribor/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/msnl-1.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-2.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-2.webp" alt="Macedonian Student Night in Ljubljana — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-3.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Macedonian Student Night in Ljubljana — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-3.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-3.webp" alt="Macedonian Student Night in Ljubljana — photo 3"><span class="cover-more-badge">+4</span></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-4.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-4.webp" alt="Macedonian Student Night in Ljubljana — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-5.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-5.webp" alt="Macedonian Student Night in Ljubljana — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-6.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-6.webp" alt="Macedonian Student Night in Ljubljana — photo 6"></button>
<button type="button" class="gallery-thumb" data-full="../../images/msnl-7.webp" data-caption="Macedonian Student Night in Ljubljana"><img loading="lazy" decoding="async" src="../../images/msnl-7.webp" alt="Macedonian Student Night in Ljubljana — photo 7"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>Paint &amp; Wine at Sunset</h2>
<a class="album-link" href="../../en/projects/paint-and-wine-at-sunset/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/macedonian-student-night-in-ljubljana/">Macedonian Student Night in Ljubljana</a></h3>
<p class="album-meta"><span>7 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/macedonian-student-night-in-ljubljana/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-1.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-1.webp" alt="Paint &amp; Wine at Sunset — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-2.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-2.webp" alt="Paint &amp; Wine at Sunset — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-3.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-3.webp" alt="Paint &amp; Wine at Sunset — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-3.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-3.webp" alt="Paint &amp; Wine at Sunset — 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="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-4.webp" alt="Paint &amp; Wine at Sunset — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-5.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-5.webp" alt="Paint &amp; Wine at Sunset — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-6.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-6.webp" alt="Paint &amp; Wine at Sunset — photo 6"></button>
@@ -286,59 +282,63 @@
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-8.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-8.webp" alt="Paint &amp; Wine at Sunset — photo 8"></button>
<button type="button" class="gallery-thumb" data-full="../../images/paint-wine-9.webp" data-caption="Paint &amp; Wine at Sunset"><img loading="lazy" decoding="async" src="../../images/paint-wine-9.webp" alt="Paint &amp; Wine at Sunset — photo 9"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>Watching Handball Together in Slovenia</h2>
<a class="album-link" href="../../en/projects/watching-handball-together-in-slovenia/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/paint-and-wine-at-sunset/">Paint &amp; Wine at Sunset</a></h3>
<p class="album-meta"><span>9 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/paint-and-wine-at-sunset/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-1.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-1.webp" alt="Watching Handball Together in Slovenia — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-2.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-2.webp" alt="Watching Handball Together in Slovenia — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-3.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-3.webp" alt="Watching Handball Together in Slovenia — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-3.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-3.webp" alt="Watching Handball Together in Slovenia — 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="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-4.webp" alt="Watching Handball Together in Slovenia — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-5.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-5.webp" alt="Watching Handball Together in Slovenia — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-6.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-6.webp" alt="Watching Handball Together in Slovenia — photo 6"></button>
<button type="button" class="gallery-thumb" data-full="../../images/handball-2025-7.webp" data-caption="Watching Handball Together in Slovenia"><img loading="lazy" decoding="async" src="../../images/handball-2025-7.webp" alt="Watching Handball Together in Slovenia — photo 7"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>Morning Coffee in front of CTK</h2>
<a class="album-link" href="../../en/projects/morning-coffee-in-front-of-ctk/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/watching-handball-together-in-slovenia/">Watching Handball Together in Slovenia</a></h3>
<p class="album-meta"><span>7 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/watching-handball-together-in-slovenia/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/event4-image1.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image1.webp" alt="Morning Coffee in front of CTK — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image2.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image2.webp" alt="Morning Coffee in front of CTK — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image3.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="Morning Coffee in front of CTK — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image3.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image3.webp" alt="Morning Coffee in front of CTK — photo 3"><span class="cover-more-badge">+4</span></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image4.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image4.webp" alt="Morning Coffee in front of CTK — photo 4"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image5.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image5.webp" alt="Morning Coffee in front of CTK — photo 5"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image6.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image6.webp" alt="Morning Coffee in front of CTK — photo 6"></button>
<button type="button" class="gallery-thumb" data-full="../../images/event4-image7.webp" data-caption="Morning Coffee in front of CTK"><img loading="lazy" decoding="async" src="../../images/event4-image7.webp" alt="Morning Coffee in front of CTK — photo 7"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>In Memory of Frosina Kulakova</h2>
<a class="album-link" href="../../en/projects/in-memory-of-frosina-kulakova/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/morning-coffee-in-front-of-ctk/">Morning Coffee in front of CTK</a></h3>
<p class="album-meta"><span>7 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/morning-coffee-in-front-of-ctk/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/frosina-1.webp" data-caption="In Memory of Frosina Kulakova"><img loading="lazy" decoding="async" src="../../images/frosina-1.webp" alt="In Memory of Frosina Kulakova — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/frosina-2.webp" data-caption="In Memory of Frosina Kulakova"><img loading="lazy" decoding="async" src="../../images/frosina-2.webp" alt="In Memory of Frosina Kulakova — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/frosina-3.webp" data-caption="In Memory of Frosina Kulakova"><img loading="lazy" decoding="async" src="../../images/frosina-3.webp" alt="In Memory of Frosina Kulakova — photo 3"></button>
</div>
</article>
<article class="album">
<div class="album-head">
<h2>In Memory of the Kochani Victims</h2>
<a class="album-link" href="../../en/projects/in-memory-of-the-kochani-victims/">Read the story <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
<div class="album-info">
<h3><a href="../../en/projects/in-memory-of-frosina-kulakova/">In Memory of Frosina Kulakova</a></h3>
<p class="album-meta"><span>3 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/in-memory-of-frosina-kulakova/">Read the story</a></p>
</div>
</article>
<article class="album-card">
<div class="gallery-grid">
<button type="button" class="gallery-thumb" data-full="../../images/kochani-1.webp" data-caption="In Memory of the Kochani Victims"><img loading="lazy" decoding="async" src="../../images/kochani-1.webp" alt="In Memory of the Kochani Victims — photo 1"></button>
<button type="button" class="gallery-thumb" data-full="../../images/kochani-2.webp" data-caption="In Memory of the Kochani Victims"><img loading="lazy" decoding="async" src="../../images/kochani-2.webp" alt="In Memory of the Kochani Victims — photo 2"></button>
<button type="button" class="gallery-thumb" data-full="../../images/kochani-3.webp" data-caption="In Memory of the Kochani Victims"><img loading="lazy" decoding="async" src="../../images/kochani-3.webp" alt="In Memory of the Kochani Victims — photo 3"></button>
<button type="button" class="gallery-thumb" data-full="../../images/kochani-3.webp" data-caption="In Memory of the Kochani Victims"><img loading="lazy" decoding="async" src="../../images/kochani-3.webp" alt="In Memory of the Kochani Victims — photo 3"><span class="cover-more-badge">+1</span></button>
<button type="button" class="gallery-thumb" data-full="../../images/kochani-4.webp" data-caption="In Memory of the Kochani Victims"><img loading="lazy" decoding="async" src="../../images/kochani-4.webp" alt="In Memory of the Kochani Victims — photo 4"></button>
</div>
<div class="album-info">
<h3><a href="../../en/projects/in-memory-of-the-kochani-victims/">In Memory of the Kochani Victims</a></h3>
<p class="album-meta"><span>4 photos</span><span class="dot" aria-hidden="true"></span><a href="../../en/projects/in-memory-of-the-kochani-victims/">Read the story</a></p>
</div>
</article>
</section>
<div class="lightbox" id="gallery-lightbox" aria-hidden="true" role="dialog" aria-label="Photo viewer">