Merge pull request 'feat: diminuir o padding para telas menores que 320px' (#21) from feature/responsivo-320 into main

Reviewed-on: #21

styles/main.css

@@ -8,25 +8,60 @@ body {
     font-family: 'Inter', sans-serif;
 }
 
+.main-banner,
+.top-infocard-image,
+.bottom-infocard-image,
+.middle-image {
+    width: 100%;
+}
+
+.top-infocard,
+.card,
+.footer-page,
+.bottom-infocard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.top-infocard-subtitle,
+.top-infocard-title,
+.card,
+.bottom-card-description,
+.bottom-infocard-title,
+.bottom-infocard-description,
+.footer-text {
+    text-align: center;
+}
+
+.top-infocard-description,
+.top-card-description,
+.bottom-card-description,
+.bottom-infocard-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.middle-images-wrapper,
+.bottom-cards {
+    width: 92.50%;
+    margin: 0 auto;
+}
+
 /*Header*/
 .header-page {
     display: flex;
     justify-content: center;
-
     background: #000;
 }
 
 .header-page-logo {
     display: block;
-
     padding: 30px 0;
 }
 
 /*Main Banner*/
-.main-banner {
-    width: 100%;
-}
-
 .main-banner-desktop {
     display: block;
 }
@@ -37,10 +72,6 @@ body {
 
 /* Top Infocard */
 .top-infocard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
     padding: 74px 0;
 }
 
@@ -48,11 +79,6 @@ body {
     width: 40%;
 }
 
-.top-infocard-subtitle,
-.top-infocard-title {
-    text-align: center;
-}
-
 .top-infocard-subtitle {
     text-transform: uppercase;
     font-weight: 400;
@@ -65,15 +91,10 @@ body {
     font-weight: 500;
     font-size: 48px;
     line-height: 58px;
-
     padding-bottom: 28px;
 }
 
 .top-infocard-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-
     padding-bottom: 73px;
 }
 
@@ -81,10 +102,6 @@ body {
     width: 16%;
 }
 
-.top-infocard-image {
-    width: 100%;
-}
-
 /*top cards*/
 .cards {
     display: flex;
@@ -93,18 +110,12 @@ body {
 
 .top-cards {
     gap: 21px;
-
     width: 57%;
     margin: 0 auto;
     padding-bottom: 80px;
 }
 
 .card {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    text-align: center;
-
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
 }
 
@@ -118,12 +129,6 @@ body {
     padding-bottom: 28px;
 }
 
-.top-card-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-}
-
 /*grid area para o middle images*/
 .middle-image-1 {
     grid-area: image1;
@@ -150,21 +155,11 @@ body {
     display: grid;
     grid-template-areas: "image1 image2 image3";
     gap: 39px;
-
-    width: 92.50%;
-    margin: 0 auto;
-}
-
-.middle-image {
-    width: 100%;
 }
 
 /*bottom cards*/
 .bottom-cards {
     gap: 16px;
-
-    width: 92.50%;
-    margin: 0 auto;
     padding-bottom: 108px;
 }
 
@@ -177,19 +172,8 @@ body {
     padding-bottom: 18px;
 }
 
-.bottom-card-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    text-align: center;
-}
-
 /*bottom infocard*/
 .bottom-infocard {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
     padding-bottom: 116px;
 }
 
@@ -201,15 +185,9 @@ body {
     font-weight: 600;
     font-size: 32px;
     line-height: 39px;
-    text-align: center;
 }
 
 .bottom-infocard-description {
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    text-align: center;
-
     padding-bottom: 50px;
 }
 
@@ -218,31 +196,24 @@ body {
 }
 
 .bottom-infocard-image {
-    width: 100%;
     height: 276px;
     object-fit: cover;
 }
 
 /*footer*/
 .footer-page {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
     background: #000;
     padding: 38px 0;
 }
 
 .footer-icons {
     list-style: none;
-
     display: flex;
     gap: 16px;
-
     padding-bottom: 16px;
 }
 
-.footer-icons > li:last-child {
+.footer-icons>li:last-child {
     margin: auto 0;
 }
 
@@ -252,12 +223,20 @@ body {
     font-size: 10px;
     line-height: 12px;
     text-transform: uppercase;
-    text-align: center;
 }
 
 /*mobile*/
 @media screen and (max-width: 1024px) {
 
+    .top-infocard-content,
+    .cards,
+    .middle-images-wrapper,
+    .bottom-infocard-image-container,
+    .bottom-infocard-image,
+    .bottom-infocard-content {
+        width: 100%;
+    }
+
     /*Banner*/
     .main-banner-desktop {
         display: none;
@@ -274,10 +253,6 @@ body {
         padding: 74px 30px 90px 30px;
     }
 
-    .top-infocard-content {
-        width: 100%;
-    }
-
     .top-infocard-subtitle {
         font-size: 20px;
         line-height: 24px;
@@ -300,7 +275,6 @@ body {
     /*top cards*/
     .cards {
         flex-direction: column;
-        width: 100%;
     }
 
     .top-cards {
@@ -332,8 +306,6 @@ body {
         grid-template-areas: "image2 image1" "image3 image3";
         column-gap: 14px;
         row-gap: 24px;
-
-        width: 100%;
     }
 
     /*bottom cards*/
@@ -346,18 +318,12 @@ body {
         padding-bottom: 88px;
     }
 
-    .bottom-infocard-image-container {
-        width: 100%;
-    }
-
     .bottom-infocard-image {
-        width: 100%;
         height: auto;
         object-fit: initial;
     }
 
     .bottom-infocard-content {
-        width: 100%;
         padding: 50px 32px 0;
     }