Apply new slideshow mechanism

resources/css/views/index.scss

@@ -1,6 +1,7 @@
 @use "../variables.scss";
 @use "../mixins.scss";
 @use "../urls.scss";
+@use "../keyframes";
 @use "sass:math";
 
 $table-item_img_width_l: 150px;
@@ -11,30 +12,71 @@ $table-item_margin_between_items: 10px;
 $social-button_img_width: 32px;
 $social-button_inner_margin: 10px;
 
-.showcase {
-  display: flex;
-  height: 90vh;
-  background-image: urls.$index_showcase_bg_day;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
+.welcome {
+  position: absolute;
+  color: white;
+  font: 500 50px Montserrat, sans-serif;
+  z-index: 5;
+  bottom: 200px;
+  left: 200px;
+  text-shadow: 2px 2px 15px black;
 
   @include mixins.header_overflow2 {
-    height: 95vh;
+    bottom: 300px;
+    left: 50px;
+  }
+
+  @include mixins.mx_mobile {
+    font-size: 32px;
   }
 }
 
-.showcase-animation {
-  animation: slideshow-appear 1000ms;
+.slideshow {
+  list-style-type: none;
+
+  @include mixins.header_overflow2 {
+    height: calc(100vh - 45px);
+  }
 }
 
-@keyframes slideshow-appear {
-  from {
+.slideshow {
+  margin: 0;
+  padding: 0;
+  height: 80vh;
+  z-index: 0;
+
+  li span {
+    position: absolute;
+    width: 100%;
+    height: 80vh;
+    left: 0;
+    color: transparent;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
     opacity: 0;
+    z-index: 0;
+    animation: slideshow 30s linear infinite 0s;
   }
 
-  to {
-    opacity: 1;
+  li:nth-child(1) span {
+    background-image: urls.$index_slide1;
+  }
+  li:nth-child(2) span {
+    background-image: urls.$index_slide2;
+    animation-delay: 6s;
+  }
+  li:nth-child(3) span {
+    background-image: urls.$index_slide3;
+    animation-delay: 12s;
+  }
+  li:nth-child(4) span {
+    background-image: urls.$index_slide4;
+    animation-delay: 18s;
+  }
+  li:nth-child(5) span {
+    background-image: urls.$index_slide5;
+    animation-delay: 24s;
   }
 }