From 80ea0ccb4b7dae104aee97da441a46160ab4db5a Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Wed, 12 Oct 2022 23:23:41 -0300
Subject: [PATCH] feat(main): Adiciona CSS das 3 imagens do mini banner central
 mobile

---
 assets/styles/style.css | 27 +++++++++++++++++++++++++++
 index.html              |  6 +++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/assets/styles/style.css b/assets/styles/style.css
index f80af35..c11742c 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -194,6 +194,33 @@ a {
     .top-card{
         width: 84%;
     }
+
+    .mini-banner-wrapper {
+        display: grid;
+        grid-template-columns: auto auto; 
+        justify-items: center;
+        row-gap: 23px;
+        column-gap: 14px;
+        bottom: -32px;
+        padding-left: 5%;
+        padding-right: 5%;
+    }
+
+    .mini-banner {
+        width: 100%;
+    }
+
+    .img-1 {
+        grid-area: 1 / 2 / 2 / 3;
+    }
+
+    .img-2 {
+        grid-area: 1 / 1 / 2 / 2;
+    }
+
+    .img-3 {
+        grid-area: 2 / 1 / 3 / 3;
+    }
 }
 
 /* TELAS GRANDES */
diff --git a/index.html b/index.html
index 2c407ba..2115ccb 100644
--- a/index.html
+++ b/index.html
@@ -74,15 +74,15 @@
 
             <div class="mini-banner-container">
                 <div class="mini-banner-wrapper">
-                    <figure class="mini-banner">
+                    <figure class="mini-banner img-1">
                         <img class="mini-banner-image" src="./assets/images/mini-banner-01.png" alt="Primeira Imagem Mini Banner"/>
                     </figure>
 
-                    <figure class="mini-banner">
+                    <figure class="mini-banner img-2">
                         <img class="mini-banner-image" src="./assets/images/mini-banner-02.png" alt="Segunda Imagem Mini Banner"/>
                     </figure>
 
-                    <figure class="mini-banner">
+                    <figure class="mini-banner img-3">
                         <img class="mini-banner-image" src="./assets/images/mini-banner-03.png" alt="Terceira Imagem Mini Banner"/>
                     </figure>
                 </div>