diff --git a/readme.md b/readme.md
index 3a460b48..91d4d748 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://Chumakv.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..988080c4 100644
--- a/src/styles/_catalog.scss
+++ b/src/styles/_catalog.scss
@@ -1,9 +1,20 @@
 .catalog {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(4, 200px);
+  gap: 48px;
+  justify-content: center;
 
-  max-width: 944px;
-  margin: 0 auto;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    grid-template-columns: repeat(3, 200px);
+  }
+
+  @media (min-width: 488px) and (max-width: 768px) {
+    grid-template-columns: repeat(2, 200px);
+  }
+
+  @media (max-width: 488px) {
+    grid-template-columns: 200px;
+  }
 
   &__card {
     display: flex;