From 594c18350b8a17c143a321ce083ea605ccef07cd Mon Sep 17 00:00:00 2001
From: iturres <emanueliturres.co@gmail.com>
Date: Tue, 6 Feb 2024 23:06:49 -0300
Subject: [PATCH] Styles: update styles to accomodate more cards at
 'ExpertiseSummaryPage.scss'

---
 src/styles/pages/ExpertiseSummaryPage.scss | 41 +++++++---------------
 1 file changed, 12 insertions(+), 29 deletions(-)

diff --git a/src/styles/pages/ExpertiseSummaryPage.scss b/src/styles/pages/ExpertiseSummaryPage.scss
index 0db4c1c..b985d18 100644
--- a/src/styles/pages/ExpertiseSummaryPage.scss
+++ b/src/styles/pages/ExpertiseSummaryPage.scss
@@ -34,17 +34,19 @@ $font-family-regular: fonts.$font-family-regular;
     0 // * bottom-desktop
   );
 
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
+  align-items: end;
   min-height: 100vh;
 
   &__card {
     min-width: 250px;
-    max-width: 350px;
+    // stylelint-disable-next-line
+    height: fit-content;
     margin: 1rem;
-    padding: 1rem;
-    border: 2px solid rgba(255, 255, 255, 0.042);
+    padding: 0.5rem;
+    padding-bottom: 0.8rem;
+    border: 2px solid rgba(255, 255, 255, 0.063);
     border-radius: 0.5rem;
 
     &:nth-child(1) {
@@ -71,7 +73,7 @@ $font-family-regular: fonts.$font-family-regular;
       margin: 0.3rem;
       padding: 0.5rem;
       border-radius: 0.5rem;
-      background-color: rgba(255, 255, 255, 0.073);
+      background-color: rgba(13, 30, 40, 0.495);
     }
   }
 
@@ -96,7 +98,7 @@ $font-family-regular: fonts.$font-family-regular;
     }
   }
 
-  @media screen and (min-width: 768px) {
+  @media (min-width: 768px) {
     @include mixins.component-code-snippet(
       'const Expertise = () => {',
       $dark,
@@ -105,31 +107,12 @@ $font-family-regular: fonts.$font-family-regular;
       // * top
       1,
       // * bottom
-      0 // * bottom-desktop
+      1 // * bottom-desktop
     );
 
-    padding-top: 3rem;
-  }
-
-  @media (min-width: 1366px) {
-    // flex-direction: row;
+    padding-top: 4rem;
     padding-left: 6rem;
 
-    &__card {
-      h2 {
-        text-align: end;
-      }
-
-      &:nth-child(1) {
-        margin-top: 4rem;
-        align-self: flex-start;
-      }
-
-      &:nth-child(3) {
-        align-self: flex-end;
-      }
-    }
-
     .squares--container {
       justify-content: flex-end;
       padding-right: 0.7rem;