diff --git a/lab-css-ironhack-news b/lab-css-ironhack-news
new file mode 160000
index 0000000..766e1a9
--- /dev/null
+++ b/lab-css-ironhack-news
@@ -0,0 +1 @@
+Subproject commit 766e1a9d82c4e16a7d508270abd8cb6c665c549c
diff --git a/styles/style.css b/styles/style.css
index 9571ab1..49404e8 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,179 +1,124 @@
-/* CSS RESET - do not remove */
-/* Reset default browser styles and provide a consistent starting point */
-html {
-  box-sizing: border-box;
-  font-size: 16px;
-}
-  
-*, *:before, *:after {
-  box-sizing: inherit;
-}
-  
-body, h1, h2, h3, h4, h5, h6, p, ol, ul {
-  margin: 0;
-  padding: 0;
-  font-weight: lighter;
-}
-
-
-/*  DO NOT REMOVE - Styling for the label showing the viewport width */
-.viewport-dimensions {
-  position: fixed;
-  top: 0;
-  right: 0;
-  background-color: #ee4545;
-  color: #fff;
-  font-weight: 500;
-  padding: 5px 8px;
-  font-size: 14px;
-}
-  
-/* STYLES */
-
-/*  Fonts */
-body {
-  font-family: "Helvetica", sans-serif;
-}
-
-/* Basic styles */
-main {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 10px 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-/*  Font sizes */
-p {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 3em;
-}
-
-h2 {
-  font-size: 2em;
-  margin-bottom: 1em;
-}
-
-h3 {
-  font-size: 1.5em;
-}
-
-/* Header and Navbar */
-header {
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-}
-
-.newspaper-name {
-  font-size: 24px;
-  padding: 10px;
-  border-bottom: 1px solid white;
-}
-
-.navbar {
-  list-style-type: none;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-}
-
-.navbar li {
-  width: 130px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-right: 1px solid #ffffff;
-}
-
-.navbar li:last-child {
-  border-right: none;
-}
-
-.navbar a {
-  text-decoration: none;
-  color: #fff;
-  font-weight: bold;
-}
-
-/* Articles */
-.main-article {
-  margin: 20px;
-  padding: 20px;
-  border: 1px solid #ccc;
-  display: flex;
-}
-
-.main-article img {
-  width: 100%;
-  height: auto;
-}
-
-.main-article .image {
-  width: 50%;
-  padding: 0 20px;
-  height: auto;
-}
-
-.main-article .content {
-  width: 50%;
-  padding: 0 20px;
-  height: auto;
-}
-
-.articles-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  padding: 20px;
-}
-
-.article {
-  width: 29%;
-  padding: 20px;
-  border: 1px solid #ccc;
-}
-
-.article img {
-  width: 100%;
-  height: auto;
-}
-
-.article h2 {
-  font-size: 20px;
-  margin-top: 10px;
-}
-
-.article p {
-  margin-top: 10px;
-}
-
-.btn {
-  background-color: #333;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  font-size: 1em;
-  font-weight: bold;
-  text-decoration: none;
-  margin-top: 30px;
-}
-
-.btn:hover {
-  background-color: #555;
-}
+/* Write your CSS below */
 
-.btn-blue {
-  background-color: #007bff;
+/* ------------------------- */
+/* Iteration 1 – Mobile (<760px) */
+/* ------------------------- */
+@media (max-width: 760px) {
+  /* Navbar vertical */
+  .navbar {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .navbar li {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #fff;
+  }
+
+  .navbar li:last-child {
+    border-bottom: none;
+  }
+
+  /* Main article full column layout */
+  .main-article {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .main-article .image,
+  .main-article .content {
+    width: 100%;
+    padding: 10px 0;
+  }
+
+  /* Articles column */
+  .articles-container {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .article {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  /* Menu icon hidden (only appears <480px) */
+  .menu-icon {
+    display: none;
+  }
+}
+
+/* ---------------------------- */
+/* Iteration 2 – Tablet (760–1024px) */
+/* ---------------------------- */
+@media (min-width: 760px) and (max-width: 1024px) {
+  /* Navbar horizontal - equal width */
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .navbar li {
+    flex: 1;
+    border-right: 1px solid white;
+  }
+
+  .navbar li:last-child {
+    border-right: none;
+  }
+
+  /* Main article: image left, content right */
+  .main-article {
+    flex-direction: row;
+  }
+
+  .main-article .image,
+  .main-article .content {
+    width: 50%;
+  }
+
+  /* Articles: 2 per row */
+  .articles-container {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .article {
+    width: 48%;
+    margin-bottom: 20px;
+  }
+
+  /* Hide menu icon */
+  .menu-icon {
+    display: none;
+  }
+}
+
+/* -------------------------------------- */
+/* Bonus Iteration 3 – Small Mobile (<480px) */
+/* -------------------------------------- */
+@media (max-width: 480px) {
+  /* Hide navbar */
+  nav {
+    display: none;
+  }
+
+  /* Show menu icon */
+  .menu-icon {
+    display: block;
+    width: 40px;
+    padding: 10px;
+    margin: 0 auto;
+  }
+
+  /* Main article */
+  .main-article {
+    flex-direction: column;
+  }
+
+  /* Articles one below another */
+  .article {
+    width: 100%;
+  }
 }
-  
-/* Write your CSS below */