From 99901214fca3dd2d3ee452c86aaa44098601c6c1 Mon Sep 17 00:00:00 2001
From: ThiagoDuutra <thiagoduutra01@gmail.com>
Date: Tue, 11 Oct 2022 12:06:59 -0300
Subject: [PATCH] fix: Melhora media top-card

---
 style/main.css | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/style/main.css b/style/main.css
index 250e444..2c20404 100644
--- a/style/main.css
+++ b/style/main.css
@@ -41,30 +41,30 @@
 }
 
 .main .top-cards {
-  display: grid;
-  grid-template-columns: repeat(3, max-content);
-  gap: 21px;
+  display: flex;
   align-items: center;
   justify-content: center;
-  padding-bottom: 80px;
+  width: 100%;
+  gap: 21px;
 }
 
 .main .top-card {
   display: flex;
   align-items: center;
   flex-direction: column;
+  justify-content: center;
+  width: 18%;
+  gap: 30px;
+  padding: 36px 25px 26px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
-  padding: 26px 26px 34px;
-  background-color: var(--white);
 }
 
 .main .card-img {
   display: block;
-  margin-bottom: 26px;
+  width: 34%;
 }
 
 .main .card-description {
-  max-width: 300px;
   text-align: center;
   line-height: 24px;
   font-size: 16px;
@@ -135,15 +135,20 @@
 
 /* Top-cards */
 
-@media (max-width: 1150px) {
+@media (max-width: 1024px) {
   .main .top-cards {
-    grid-template-columns: repeat(2, 1fr);
-    padding: 0 26px;
+    display: flex;
+    flex-direction: column;
+    padding: 0 23px;
+  }
+  .main .top-cards,
+  .main .top-card,
+  .main .card-description {
+    width: 100%;
   }
 
-  .main .card-3 {
-    grid-column-start: 1;
-    grid-column-end: 3;
+  .main .card-img {
+    width: 17%;
   }
 }
 
@@ -156,6 +161,12 @@
 
 /* Middle card*/
 
+@media (max-width: 1024px) {
+  .main .container-middle-cards {
+    padding: 0 23px;
+  }
+}
+
 @media (max-width: 768px) {
   .main .middle-cards {
     margin-top: 44px;
-- 
2.34.1