diff --git a/index.handlebars b/index.handlebars
index 8690039..5543168 100755
--- a/index.handlebars
+++ b/index.handlebars
@@ -60,6 +60,13 @@ main{
     height: 0px;
     margin: 0;
 }
+#mainImage>div>a:first-child>img{
+    object-fit: contain;
+    display: inline-block;
+    max-height: 80vh;
+    max-width: 100%;
+    align-self: center;
+}
 #mainImage>div>img:first-child{
     object-fit: contain;
     display: inline-block;
@@ -304,7 +311,7 @@ h2>:last-child:not(span){
             <div id="mainImage">
                 {{#art}}
                 <div class="mainimg{{index}}">
-                    <img src="img/{{index}}.png" title="{{title}}" alt="{{title}}" height="{{height}}" loading="lazy"></img>
+                    {{#next}}<a href="#img{{.}}">{{/next}}<img src="img/{{index}}.png" title="{{title}}" alt="{{title}}" height="{{height}}" loading="lazy"></img>{{#next}}</a>{{/next}}
                     <div>
                         <h2>{{#previous}}<a href="#img{{.}}">&larr;</a>{{/previous}}<span>{{title}}</span>{{#next}}<a href="#img{{.}}">&rarr;</a>{{/next}}</h2>
                         {{#description}}<p>{{&.}}</p>{{/description}}
@@ -318,7 +325,7 @@ h2>:last-child:not(span){
                 {{/art}}
                 {{#pict}}{{#content}}
                 <div class="mainpict{{index}}">
-                    <img src="pict/{{index}}.jpg" title="{{title}}" alt="{{title}}" height="{{height}}" loading="lazy"></img>
+                    {{#next}}<a href="#pict{{.}}">{{/next}}<img src="pict/{{index}}.jpg" title="{{title}}" alt="{{title}}" height="{{height}}" loading="lazy"></img>{{#next}}</a>{{/next}}
                     <div>
                         <h2>{{#previous}}<a href="#pict{{.}}">&larr;</a>{{/previous}}<span>{{title}}</span>{{#next}}<a href="#pict{{.}}">&rarr;</a>{{/next}}</h2>
                         {{#description}}<p>{{&.}}</p>{{/description}}