Reworked projects section

src/components/Projects/Project.module.css

@@ -2,26 +2,43 @@
   position: relative;
   background: var(--clr-bg-trietary);
   border-radius: var(--radius-md);
-  width: calc(33% - var(--gap-lg));
-  min-width: 320px;
+  width: 100%;
+  height: 400px;
+  box-sizing: border-box;
+  display: flex;
+  padding: var(--gap-md);
+  gap: var(--gap-md);
+}
+
+.Project_odd {
+  flex-direction: row-reverse;
+}
+
+.Project_halfWidth {
+  width: calc(50% - var(--gap-lg) / 2);
+  flex-direction: column-reverse;
+  align-items: end;
+}
+
+.Project_halfWidth .preview {
+  height: 40%;
 }
 
 .preview {
-  position: relative;
+  max-height: 100%;
+  max-width: 50%;
   display: block;
-  border-radius: var(--radius-md) var(--radius-md) 0 0;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 250px;
-  object-fit: cover;
-  object-position: top;
+  object-fit: contain;
 }
 
 .body {
-  padding: var(--gap-sm);
+  display: flex;
+  flex-direction: column;
   text-align: left;
-  height: 107px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  gap: var(--gap-sm);
 }
 
 .name {
@@ -29,12 +46,29 @@
 }
 
 .description {
-  padding-top: var(--gap-sm);
   font: var(--font-sm);
 }
 
-@media screen and (max-width: 1464px) {
+@media screen and (max-width: 1080px) {
   .Project {
-    width: calc(50% - var(--gap-lg));
+    flex-direction: column-reverse;
+    align-items: end;
+    height: unset;
+    gap: var(--gap-lg);
+  }
+
+  .Project_halfWidth {
+    width: 100%;
+  }
+
+  .Project_halfWidth .preview {
+    height: 200px;
+    width: auto;
+  }
+  
+  .preview {
+    height: 200px;
+    width: 100%;
+    max-width: 100%;
   }
 }