From 28bac076125f27da910ec0fd1dea208dd015fd59 Mon Sep 17 00:00:00 2001
From: Kakabay <kashyrberdyew@gmail.com>
Date: Thu, 2 Feb 2023 16:36:20 +0500
Subject: [PATCH] started responsive

---
 src/styles/_news-section.scss |  6 +++++
 src/styles/_news.scss         | 48 +++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/src/styles/_news-section.scss b/src/styles/_news-section.scss
index aacdf1e..e70535d 100644
--- a/src/styles/_news-section.scss
+++ b/src/styles/_news-section.scss
@@ -9,3 +9,9 @@
   flex-direction: column;
   gap: 5.6rem;
 }
+
+@media (max-width: 1024px) {
+  .news-outer-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/styles/_news.scss b/src/styles/_news.scss
index 38f7ee7..29bd42a 100644
--- a/src/styles/_news.scss
+++ b/src/styles/_news.scss
@@ -22,6 +22,10 @@
   font-size: 2.4rem;
   font-weight: 700;
   @include raleway;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
 
 .news-status {
@@ -47,3 +51,47 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+
+@media (max-width: 768px) {
+  .news-wrapper {
+    flex-direction: column;
+  }
+
+  .news-image {
+    width: 100%;
+    height: 16rem;
+    overflow: hidden;
+    object-fit: cover;
+    object-position: center;
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    span {
+      display: block !important;
+    }
+  }
+
+  .news-title {
+    font-size: 1.6rem;
+  }
+
+  .news-text {
+    display: none;
+  }
+
+  .new-status {
+    order: 1;
+  }
+
+  .news-info {
+    align-items: start;
+  }
+
+  .news-link {
+    display: none;
+  }
+}