Edit HTML structure

assets/css/main.scss

@@ -80,27 +80,28 @@ body {
 }
 
 // ----------------------------------------------------------------------------
-// HEADER
+// MAIN
 // ----------------------------------------------------------------------------
 
-// Sidebar
+// Home section
 
-.sidebar {
+.home-section {
     position: relative;
     z-index: 1;
     width: 100%;
+    min-height: 100vh;
     padding: var(--sidebar-padding);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
     background-color: transparent;
+}
 
-    .sidebar__nav {
-        max-width: 100%;
-    }
-
-    .sidebar__nav-link {
+.navigation {
+    max-width: 100%;
+    
+    &__link {
         display: inline-block;
         max-width: 100%;
         overflow-x: hidden;
@@ -117,23 +118,23 @@ body {
             }
         }
     }
+}
 
-    .sidebar__social {
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: 0.8rem 0 0 0;
-    }
-
-    .sidebar__social-link {
+.social {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0.8rem 0 0 0;
+    
+    &__link {
         width: var(--icon-size);
         height: var(--icon-size);
         display: flex;
         justify-content: center;
         align-items: center;
 
-        + .sidebar__social-link {
+        + .social__link {
             margin: 0 0 0 0.8rem;
         }
 
@@ -153,34 +154,32 @@ body {
 
 @media screen and (min-width: $desktop-media-query) {
 
-    .sidebar {
+    .home-section {
         position: fixed;
         overflow-y: auto;
         top: 0;
-        bottom: 0;
         left: 0;
+    }
 
-        .sidebar__social {
-            width: auto;
-            justify-content: flex-start;
-        }
+    .social {
+        width: auto;
+        justify-content: flex-start;
     }
 }
 
-// ----------------------------------------------------------------------------
-// MAIN
-// ----------------------------------------------------------------------------
-
 // Slider section
 
 .slider-section {
     position: fixed;
     top: 0;
-    right: 0;
+    left: 0;
 }
 
-.splide__image {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.splide {
+    
+    &__image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
 }