feat: recent-page-update

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;
+	}
 }