diff --git a/layouts/archives/single.html b/layouts/archives/single.html
index a219df3..596ca63 100644
--- a/layouts/archives/single.html
+++ b/layouts/archives/single.html
@@ -11,23 +11,28 @@
 		{{ $img := newScratch }}
 		{{ $folder := (print "/content/" .File.Dir "gallery/") }}
 		{{ $files := readDir $folder }}
+		{{ $img.Set "max" 0 }}
 		{{ range sort $files "Name" "asc" }}
 			{{ if not .IsDir }}
-				{{ $img.Add "list" (slice .Name) }}
+				{{ if not (in .Name "thumb") }}
+					{{ $img.Add "list" (slice .Name) }}
+					{{ $img.Set "max" (add ($img.Get "max") 1) }}
+				{{ end }}
 			{{ end }}
 		{{ end }}
-		{{ with ($img.Get "list") }}
-			{{ $img.Set "max" (add 1 (int (index (split (index (split (index (last 1 .) 0) ".") 0) "img") 1))) }}
-		{{ end }}
 		{{ range $index, $val := $img.Get "list" }}
 			{{ $curr := index (split $val ".") 0 }}
 			{{ $prec := mod (add (sub $index 1) ($img.Get "max")) ($img.Get "max") }}
 			{{ $next := mod (add $index 1) ($img.Get "max") }}
 			<a class="thumb hidden_link" href="#img{{ $index }}">
-				<img src="gallery/thumb/{{ $curr }}.jpg">
+				<picture>
+					<source srcset="gallery/{{ $curr }}.thumb.avif" type="image/avif"/>
+					<source srcset="gallery/{{ $curr }}.thumb.webp" type="image/webp"/>
+					<img src="gallery/{{ $curr }}.thumb.jpg"/>
+				</picture>
 			</a>
 			<!-- lightbox container hidden with CSS -->
-			<div class="lightbox" id="{{ $curr }}">
+			<div class="lightbox" id="img{{ $index }}">
 				<a href="#img{{ $prec }}" class="light-btn hidden_link btn-prev"><<</a>
 				<a href="#_" class="btn-close hidden_link">X</a>
 				<img src="gallery/{{ $val }}">
diff --git a/static/css/style.css b/static/css/style.css
index 42f86cf..8567eda 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -796,7 +796,7 @@ blockquote:after {
 .thumb:hover {
 	z-index: 2;
 }
-.thumb>img {
+.thumb img {
 	max-height: 150px;
 	max-width: 150px;
 	border: solid 4px var(--background-color-dark);