From 9a309536d2d3910ace5f1cdd019cda85fe801899 Mon Sep 17 00:00:00 2001
From: Muthu Kumar <muthukumar@thefeathers.in>
Date: Tue, 11 Jun 2024 00:33:29 +0530
Subject: [PATCH] fix: project unit overflow on small screens

---
 src/components/Container.tsx | 2 +-
 src/pages/main/Projects.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 321ba88..c1f1611 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -159,7 +159,7 @@ const Container: React.FC<{
 			className={css`
 				padding-block-start: 15rem;
 				padding-block-end: 8rem;
-				padding-inline: calc(100vw / 8);
+				padding-inline: 10vw;
 				overflow: hidden;
 				min-height: 100vh;
 				position: relative;
diff --git a/src/pages/main/Projects.tsx b/src/pages/main/Projects.tsx
index f5d0185..ccdc6df 100644
--- a/src/pages/main/Projects.tsx
+++ b/src/pages/main/Projects.tsx
@@ -107,7 +107,7 @@ const Exp: React.FC = () => {
 			<div
 				className={css`
 					display: grid;
-					grid-template-columns: repeat(auto-fit, 20rem);
+					grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
 					gap: 1rem;
 					width: 100%;
 				`}>