Video section only main

src/App.tsx

@@ -13,7 +13,6 @@ import Category from "./pages/Category";
 
 // Components
 import Header from "./components/header/Header";
-import Videos from "./components/videos/Videos";
 import Footer from "./components/footer/Footer";
 
 const App = () => {
@@ -25,7 +24,7 @@ const App = () => {
         <Route path="/category/:category" element={<Category />} />
         <Route path="/news/:id" element={<NewsArticle />} />
       </Routes>
-      <Videos />
+
       <Footer />
     </div>
   );

src/pages/Main.tsx

@@ -1,18 +1,23 @@
-import Aside from '../components/aside/Aside';
-import NewsScroll from '../components/global/NewsScroll';
+// Components
+import Aside from "../components/aside/Aside";
+import NewsScroll from "../components/global/NewsScroll";
+import Videos from "../components/videos/Videos";
 
 const Main = () => {
   return (
-    <div className="main">
+    <main className="main">
       <div className="news-section">
         <div className="container">
           <div className="news-inner">
+            <div className="news-outer-wrapper">
               <NewsScroll state={true} />
               <Aside />
             </div>
+            <Videos />
           </div>
         </div>
       </div>
+    </main>
   );
 };
 

src/styles/_asideNews.scss

@@ -20,6 +20,10 @@
   font-size: 1.6rem;
   font-weight: 700;
   @include raleway;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .aside-news-status {

src/styles/_category.scss

@@ -11,7 +11,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 50%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
   z-index: 2;
   pointer-events: none;
   display: flex;
@@ -43,7 +47,7 @@
 }
 
 .category-inner {
-  padding-top: 5.6rem;
+  padding: 5.6rem 0;
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2.4rem;

src/styles/_main.scss

@@ -1,3 +1,3 @@
 .main {
-  padding-top: 5.6rem;
+  padding: 5.6rem 0;
 }

src/styles/_news-article.scss

@@ -1,5 +1,5 @@
 .news-article {
-  padding-top: 5.6rem;
+  padding: 5.6rem 0;
 }
 .news-article-inner {
   display: grid;

src/styles/_news-section.scss

@@ -1,5 +1,11 @@
-.news-inner {
+.news-outer-wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 2.4rem;
 }
+
+.news-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 5.6rem;
+}

src/styles/_videos.scss

@@ -1,5 +1,5 @@
 .videos {
-  padding: 5.6rem 0;
+  // padding: 5.6rem 0;
 }
 
 .videos-inner {