feat(landing): trailer and articles section

assets/sass/landing.scss

@@ -38,8 +38,6 @@
     justify-content: flex-end;
 }
 
-
-
 .cover__overlay {
     position: absolute;
     width: 100%;
@@ -49,6 +47,65 @@
     background-color: rgba(14, 14, 14, 0.2);
 }
 
+.dark-section {
+    background-color: #025E73;
+    color: white;
+    box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.2);
+
+    h2 {
+        color: white;
+    }
+}
+
+.trailer-section {
+    @extend .dark-section;
+
+    .video {
+        z-index: 3;
+        position: relative;
+    }
+}
+
+.landing-section {
+    @extend .dark-section;
+    position: relative;
+    .side-icon {
+        position: absolute;
+
+        z-index: 1;
+        left: 20px;
+        bottom: -100px;
+        opacity: 0.4;
+        svg {
+            width: 300px;
+        }
+    }
+
+    .section-title {
+        padding-top: 2rem;
+    }
+}
+
+.news-section {
+
+    .side-icon {
+        left: -50px;
+        bottom: -75px;
+        svg {
+            width: 500px;
+            opacity: 0.3;
+        }
+    }
+    .separator {
+        width: 100%;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        margin: 1rem 0;
+    }
+    .article-cards {
+        margin-bottom: 1rem;
+    }
+}
+
 @keyframes cover_title_in {
     0% {
         left: -10rem;
@@ -100,7 +157,7 @@
 @media (min-width: $lg-breakpoint) {
     .cover__back {
         background-position-x: center;
-        background-position-y: -1.5rem;
+        // background-position-y: -1.5rem;
     }
 }
 
@@ -287,5 +344,9 @@
 @media (max-width: $md-breakpoint) {
     .history-container {
     }
+
+    .side-icon {
+        display: none;
+    }
 }