diff --git a/package.json b/package.json
index 9814b81e..4fe9cc0b 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,8 @@
     "parcel": "^1.12.4",
     "stylelint": "^13.5.0",
     "stylelint-config-recommended-scss": "^3.3.0",
-    "stylelint-scss": "^3.17.2"
+    "stylelint-scss": "^3.17.2",
+    "sass": "^1.69.5"
   },
   "browserslist": [
     "last 2 versions"
diff --git a/readme.md b/readme.md
index 3a460b48..c524ae63 100644
--- 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://anton-chornobai.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/styles/_catalog.scss b/src/styles/_catalog.scss
index a63c46d7..90b83935 100644
--- a/src/styles/_catalog.scss
+++ b/src/styles/_catalog.scss
@@ -1,9 +1,14 @@
-.catalog {
-  display: flex;
-  flex-wrap: wrap;
+$breakpoint-computer: 1024px;
+$breakpoint-tablet: 768px;
+$breakpoint-phone: 488px;
 
+.catalog {
+  display: grid;
+  gap: 48px;
   max-width: 944px;
   margin: 0 auto;
+  padding: 0 20px;
+
 
   &__card {
     display: flex;
@@ -14,9 +19,30 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-bottom: 48px;
+    box-sizing: border-box;
   }
+}
+
+@media (min-width: $breakpoint-phone) {
+  .catalog {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: $breakpoint-phone) {
+  .catalog {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@media (min-width: $breakpoint-tablet) {
+  .catalog {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
 
-  &__card:not(:nth-child(4n)) {
-    margin-right: 48px;
+@media (min-width: $breakpoint-computer) {
+  .catalog {
+    grid-template-columns: repeat(4, 1fr);
   }
 }