mate-academy · usernameluke · Oct 23, 2023 · Oct 23, 2023
diff --git a/readme.md b/readme.md
@@ -1,6 +1,6 @@
 # Frontend practice with catalog page using grid
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_catalog_grid/)
+- [DEMO LINK](https://usernameluke.github.io/layout_catalog_grid/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 

diff --git a/src/index.html b/src/index.html
@@ -13,39 +13,39 @@
     >
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 
-    <link rel="stylesheet" href="./styles/main.scss">
+    <link rel="stylesheet" href="./styles/main.css">
   </head>
   <body>
     <header class="header">
-      <a class="header__logo" href="">
+      <a class="header__logo" href="#">
         <img src="./images/logo.png" alt="Moyo logo">
       </a>
 
       <nav class="nav">
         <ul class="nav__list">
           <li class="nav__item nav__item--is-active">
-            <a href="" class="nav__link">Apple</a>
+            <a href="#" class="nav__link">Apple</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Samsung</a>
+            <a href="#" class="nav__link">Samsung</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Smartphones</a>
+            <a href="#" class="nav__link">Smartphones</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Laptops & computers</a>
+            <a href="#" class="nav__link">Laptops & computers</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Gadgets</a>
+            <a href="#" class="nav__link">Gadgets</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Tablets</a>
+            <a href="#" class="nav__link">Tablets</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Photo</a>
+            <a href="#" class="nav__link">Photo</a>
           </li>
           <li class="nav__item">
-            <a href="" class="nav__link">Video</a>
+            <a href="#" class="nav__link">Video</a>
           </li>
         </ul>
       </nav>

diff --git a/src/styles/_catalog.scss b/src/styles/_catalog.scss
@@ -1,9 +1,8 @@
 .catalog {
-  display: flex;
-  flex-wrap: wrap;
-
-  max-width: 944px;
-  margin: 0 auto;
+  display: grid;
+  gap: 48px;
+  grid-template-columns: repeat(4, 200px);
+  justify-content: center;
 
   &__card {
     display: flex;
@@ -13,10 +12,23 @@
     height: 300px;
     border: 1px solid #ccc;
     border-radius: 5px;
-    margin-bottom: 48px;
   }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .catalog {
+    grid-template-columns: repeat(3, 200px);
+  }
+}
+
+@media (min-width: 488px) and (max-width: 767px) {
+  .catalog {
+    grid-template-columns: repeat(2, 200px);
+  }
+}
 
-  &__card:not(:nth-child(4n)) {
-    margin-right: 48px;
+@media (max-width: 487px) {
+  .catalog {
+    grid-template-columns: auto;
   }
 }
diff --git a/src/styles/main.css b/src/styles/main.css
diff --git a/src/styles/main.css.map b/src/styles/main.css.map