From c7e76e04830d5b7b38e0b501e73ecaa94c648539 Mon Sep 17 00:00:00 2001
From: Gabriel Bernardini <biielbernardini@gmail.com>
Date: Thu, 13 Oct 2022 19:53:20 -0300
Subject: [PATCH] feat:adiciona responsividade ao inforcard de baixo

---
 assets/style/main.css | 71 +++++++++++++++++++++++++++++++++++++++++--
 index.html            |  2 +-
 2 files changed, 70 insertions(+), 3 deletions(-)

diff --git a/assets/style/main.css b/assets/style/main.css
index bcfd086..8f11dac 100644
--- a/assets/style/main.css
+++ b/assets/style/main.css
@@ -116,14 +116,55 @@ body {
     width: 100%;
 }
 
+.infocards-bottom {
+    display: grid;
+    justify-content: center;
+    grid-template-columns: repeat(4,432px);
+    gap: 16px;
+    padding: 192px 72px 0 72px;
+}
+
+.infocard-bottom {
+    height: 332px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.infocards-bottom-image {
+    margin: 0 auto;
+    display: block;
+    padding-top: 35px;
+}
+
+.infocards-bottom-text {
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    padding-top: 15px;
+}
+
+
 @media screen and (min-width: 769px) and (max-width: 1270px) {
 
     .second-infocard {
         grid-template-columns: repeat(2, 350px);
     }
+
+    .infocards-bottom {
+        display: grid;
+        grid-template-columns: repeat(2, 368px);  
+        max-width: 368px;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+      }
+
+
+
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width:768px){
     .first-infocard-title {
         font-size: 28px;
         line-height: 34px;
@@ -179,11 +220,37 @@ body {
         column-gap: 14px;
         
     }
-    
+
+    .infocards-bottom {
+        display: grid;
+        grid-template-columns: repeat(1, 368px);  
+        max-width: 368px;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+      }
+
+      .infocards-bottom-text {
+        font-size: 14px;
+        max-width: 302px;
+        margin: 0 auto;
+    }
 }
 
 @media screen and (max-width: 415px) {
     .image-main-desktop {
         content: url(../imagem/banner-main-mobile.png);
     }
+
+    .infocards-bottom {
+    display: grid;
+    grid-template-columns: repeat(1, max-content);  
+    max-width: 368px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8e1c15d..43ad370 100644
--- a/index.html
+++ b/index.html
@@ -105,7 +105,7 @@
                 </figure>
             
                 <figure class="infocard-bottom">
-                    <img class="infocards-bottom-image" src="assets/imagem/bottom-loja.svg" alt="Icone de uma loja" />
+                    <img class="infocards-bottom-image" src="assets/imagem/bottom-celular.svg" alt="Icone de um calular" />
                     
                     <figcaption class="infocards-bottom-text">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.