From 684239892b8815d63a1859d07f1c7308927d2655 Mon Sep 17 00:00:00 2001
From: maik791277 <potili@bk.ru>
Date: Mon, 15 Jan 2024 21:15:35 +0200
Subject: [PATCH] feat: recent-page-update

---
 .../recipe-list/receipt-list.module.scss      | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/pages/recipe-list/receipt-list.module.scss b/src/pages/recipe-list/receipt-list.module.scss
index 1b7421c..a90da53 100644
--- a/src/pages/recipe-list/receipt-list.module.scss
+++ b/src/pages/recipe-list/receipt-list.module.scss
@@ -3,6 +3,11 @@
 	width: calc(100% - 128px * 2);
 	display: flex;
 	flex-direction: column;
+	padding: 48px 0;
+
+	@media screen and (width <= 768px) {
+		width: calc(100% - 50px * 2);
+	}
 }
 
 .recipelist__container {
@@ -21,4 +26,22 @@
 	columns: 20px;
 	grid-template-columns: repeat(3, calc(100% / 3 - 40px));
 	grid-auto-rows: 380px;
+
+	@media screen and (width <= 1100px) {
+		grid-template-columns: repeat(2, calc(50% - 20px));
+	}
+
+	@media screen and (width <= 768px) {
+		grid-auto-rows: 150px;
+		justify-items: center;
+		grid-template-columns: repeat(3, calc(30% - 20px));
+	}
+
+	@media screen and (width <= 500px) {
+		grid-template-columns: repeat(2, calc(50% - 20px));
+	}
+
+	@media screen and (width <= 350px) {
+		grid-template-columns: 1fr;
+	}
 }