updates

src/pages/root.css

@@ -2,25 +2,25 @@
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
-    padding: 40px;
+    padding: 40px 0;
 }
 
 @media (max-width: 1020px) {
-  .video-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 12px;
-      padding: 16px;
-  }
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 12px;
+        padding: 16px;
+    }
 }
 
 @media (max-width: 720px) {
-  .video-grid {
-      display: grid;
-      grid-template-columns: 1fr;
-      gap: 12px;
-      padding: 16px;
-  }
+    .video-grid {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 32px;
+        padding: 16px;
+    }
 }
 
 @media(min-width: 1600px) {
@@ -36,11 +36,41 @@
 }
 
 .homepage {
-  width: 100%;
-  grid-area: main-content;
+    width: 100%;
+    grid-area: main-content;
 }
 
-.homepage h2 {
-    background: #171717;
-    padding: 40px;
+.divider {
+    display: flex;
 }
+
+.divider:after {
+    content: "";
+    flex: 1;
+}
+
+.line {
+    align-items: center;
+    margin: 1em 0;
+}
+
+.line:after {
+    height: 1px;
+    margin: 0 1em;
+}
+
+.one-line:before,
+.one-line:after {
+    background-color: #171717;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    background: #111;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 100px;
+    min-height: 24px;
+}