Home page and news page are finished

resources/assets/sass/components/_main_news.scss

@@ -1,9 +1,73 @@
+@use "../abstracts/mixin" as *;
+@use "../abstracts/variables" as *;
+
 .blog_grid {
-  img {
-    max-width: 100%;
-  }
   .row, .row > * {
     padding: 0;
     margin: 0;
   }
+  .row {
+    height: 100%;
+  }
+  .post {
+    position: relative;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      filter: brightness(50%);
+    }
+
+    &.small {
+      height: 50%;
+    }
+
+    .slider_content_box {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      padding: 15px;
+
+      .post_details {
+        @include reset-list;
+
+        .category a {
+          padding: 6px 11px 7px;
+          border-radius: 3px;
+          background-image: linear-gradient(to right, #0d1ca3, #45aaf8);
+          font-family: Nunito, serif;
+          font-size: 10px;
+          font-weight: bold;
+          text-align: center;
+          color: $news-banner-text-color;
+          text-decoration: none;
+          text-transform: uppercase;
+        }
+      }
+
+      h2, h5 {
+        margin: 15px 0 0 0;
+      }
+      h2 a, h5 a {
+        font-family: Montserrat, serif;
+        font-size: 30px;
+        font-weight: 600;
+        line-height: 1;
+        color: $news-banner-text-color;
+        text-decoration: none;
+      }
+      h5 a {
+        font-size: 16px;
+        line-height: 1.17;
+      }
+      .post_date {
+        @include post_date;
+        color: $news-banner-text-color;
+      }
+    }
+  }
 }