diff --git a/styles/style.css b/styles/style.css
index 9571ab1..def6d2a 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -177,3 +177,65 @@ header {
 }
   
 /* Write your CSS below */
+
+@media (max-width: 760px) {
+  nav {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  nav a {
+    display: block;
+    width: 100%;
+    text-align: center;
+    padding: 10px 0;
+  }
+
+  .main-article, .articles-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .article {
+    width: 90%;
+    margin-bottom: 15px;
+  }
+
+  .main-article img {
+    width: 100%;
+  }
+}
+@media (min-width: 760px) and (max-width: 1024px) {
+  nav {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .main-article {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+  }
+
+  .main-article img {
+    width: 50%;
+  }
+
+  .main-article-content {
+    width: 50%;
+  }
+
+  .articles-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+  }
+
+  .article {
+    width: 45%;
+    margin-bottom: 20px;
+  }
+}
\ No newline at end of file