fix: incorrect grid display of projects

1 files changed, 15 insertions, 11 deletions

diff --git a/style.css b/style.css
index 82ab6a2..599fb66 100644
--- a/style.css
+++ b/style.css
@@ -96,8 +96,7 @@ a.icon:not(:last-child) {
 .project-container {
   padding: 0 10vw;
   display: grid;
-  grid-template-columns: repeat(2, minmax(40vw, 1fr));
-  height: 80dvh;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: center;
   justify-items: center;
   overflow: auto;
@@ -111,17 +110,27 @@ a.icon:not(:last-child) {
 }
 
 .project {
+  width: 100%;
   margin: 15px 15px;
   font-size: clamp(var(--font-min), 1vw, var(--font-max));
   padding: 25px 10px;
-  display: flex;
-  align-items: center;
   background: #1e1e2e;
   transition: transform .3s ease-in-out;
   border-radius: 2vh;
   box-shadow: -12px -12px 28px #27273b73, 12px 12px 20px #12121c73;
 }
 
+.project a {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  transition: transform .3s ease-in-out;
+
+  &:hover {
+    transform: scale(103%);
+  }
+}
+
 .spacer {
   height: 20dvh;
   display: flex;
@@ -141,15 +150,10 @@ a.icon:not(:last-child) {
   margin-right: 10px;
 }
 
-@media (max-width: 839px) {
+@media (max-width: 700px) {
   .project-container {
-    grid-template-columns: minmax(90vw, 1fr);
+    grid-template-columns: 85vw;
     padding: 0 5vw;
     align-content: normal;
   }
 }
-
-a:hover .project {
-  transform: scale(103%);
-  transition: transform .3s ease-in-out;
-}