slider ok

assets/css/_home-item-nav.scss

@@ -37,7 +37,6 @@
         margin-top: 0.5em;
         flex-grow: 2;
         padding-right: 2ch;
-        font-weight: 500;
     }
 
     &:hover{

assets/css/_home.scss

@@ -57,8 +57,11 @@
 
 .slideshow{
     width: 100%;
-    height: calc(var(--unit)*11);
-    overflow: hidden;
+    height: calc(var(--unit)*13);
+
+    figure{
+        height: calc(var(--unit)*11);
+    }
 }
 
 .highlight-block{

assets/css/_slideshow.scss

@@ -1,10 +1,12 @@
-
+$slideshow-items: 3;
 
 .slideshow {
     height: 100%;
     width: 100%;
     margin-left: 0;
-    overflow: hidden;
+    // overflow-y: hidden;
+    overflow: visible;
+    --arrow-space: 40px;
     *{
         position: relative;
     }
@@ -14,6 +16,7 @@
 .slideshow-container{
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 .slideshow-inner {
@@ -25,16 +28,26 @@
     width: calc(100%/var(--items));
     height: 100%;
     float: left;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     figure{
-        width: 100%;
-        height: 100%;
+        width: calc(100% - var(--arrow-space)*2);
+        height: calc(100% - var(--unit));
         img{
             width: 100%;
         height: 100%;
         object-fit: cover; 
         }
     }
+
+    figcaption{
+        width: calc(100% - var(--arrow-space)*2);
+        font-size: var(--fs-small);
+        height: calc(var(--unit)*2);
+        padding-top: calc(var(--padding-inner)*0.5);
+    }
 }
 
 
@@ -52,18 +65,6 @@
 }
 
 
-/* Move slides overflowed container */
-#slide-input-1:checked ~ .slideshow-inner {
-    left: 0;
-}
-#slide-input-2:checked ~ .slideshow-inner {
-    left: -100%;
-}
-#slide-input-3:checked ~ .slideshow-inner {
-    left: -200%;
-}
-
-
 
 
 
@@ -106,14 +107,15 @@ span.controls::after {
     top: 50%;
     transform: translateY(-50%);
     position: absolute;
-    background: white;
+    // background: white;
     font-size: 20px;
     z-index: 9;
 }
 
 .slide_controls-previous:hover ~ span.controls:before,
 .slide_controls-next:hover ~ span.controls:after {
-    background: #bfbfbf!important;
+    // background: #bfbfbf!important;
+    opacity: 0.7;
 }
 
 span.controls::before {
@@ -126,32 +128,24 @@ span.controls::after {
     right: -1px;
 }
 
-/* Control arrows display
---------------------------------------------------------------------
--------------------------------------------------------------------- */
+/* Position slide + Control arrows display -------------------------------------------- */
 
-#slide-input-1:checked ~ .slideshow-controls label {
-    z-index: -1;
-}
-#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
-#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(2) {
-    z-index: 11;
+
+@for $i from 1 through $slideshow-items {
+    #slide-input-#{$i}:checked ~ .slideshow-inner {
+        left: #{($i - 1) * -100%};
+    }
 }
 
-#slide-input-2:checked ~ .slideshow-controls label {
-    z-index: -1;
-}
-#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(3),
-#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(4) {
-    z-index: 11;
-}
 
-#slide-input-3:checked ~ .slideshow-controls label {
-    z-index: -1;
-}
-#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(5),
-#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(6) {
-    z-index: 11;
+@for $i from 1 through $slideshow-items {
+    #slide-input-#{$i}:checked ~ .slideshow-controls label {
+        z-index: -1;
+    }
+    #slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2 - 1}),
+    #slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2}) {
+        z-index: 11;
+    }
 }