Fix cards size

ekaterinburgdev · Jul 13, 2023 · 8016f1d · 8016f1d
1 parent 8612343
commit 8016f1d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -73,7 +73,7 @@
     }
 
     .CardTitle {
-        font-size: 1.8vw;
+        font-size: 1.5vw;
     }
 
     .CardSubtitle {

diff --git a/client/components/MainPage/MainPage.module.css b/client/components/MainPage/MainPage.module.css
@@ -43,6 +43,7 @@
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     grid-auto-flow: row dense;
+    align-items: stretch;
     gap: 24px;
     margin-bottom: 24px;
 }
@@ -56,28 +57,42 @@
 
 .MainPageCardGrid > * {
     aspect-ratio: 1 / 1;
+    max-width: 100%;
 }
 
-.MainPageCardGrid > *:nth-child(1) {
+.MainPageCardGrid > *:first-child,
+.MainPageCardGrid > *:last-child {
     grid-area: span 1 / span 2;
     aspect-ratio: 2 / 1;
+    align-self: stretch;
 }
 
 @media screen and (min-width: 768px) {
     .MainPage {
         background-size: 100% auto;
         padding-bottom: 16vw;
     }
+}
+
+
+@media screen and (min-width: 1200px) {
+    .MainPageCardGrid > *:first-child {
+        aspect-ratio: auto;
+    }
+
+    .MainPageCardGrid > *:last-child {
+        grid-area: auto;
+        aspect-ratio: auto;
+        align-self: stretch;
+    }
 
-    .MainPageCardGrid > *:nth-child(1),
-    .MainPageCardGrid > *:nth-child(6) {
-        grid-area: span 1 / span 2;
-        aspect-ratio: 2 / 1;
+    .MainPageCardGrid {
+        grid-template-columns: repeat(3,1fr);
     }
 }
 
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1440px) {
     .MainPageCardGrid {
         grid-template-columns: repeat(4,1fr);
     }