From f5db3884168a22bb16d89a740e6987fd38d6b27e Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Wed, 12 Oct 2022 10:19:14 -0300
Subject: [PATCH] feat(home): adicionando carousel de imgs desktop e mobile

---
 assets/styles/css/main.css  | 38 +++++++++++++++++++++++++++++++++++++
 assets/styles/css/reset.css |  1 -
 index.html                  |  6 +++---
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/assets/styles/css/main.css b/assets/styles/css/main.css
index 8bd1ba8..9636062 100644
--- a/assets/styles/css/main.css
+++ b/assets/styles/css/main.css
@@ -97,6 +97,26 @@
     max-width: 300px;
 }
 
+.carousel{
+    margin-top: 80px;
+    background: #E0E0E0;
+}
+
+.carousel__products {
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    gap: 40px;
+    justify-content: center; 
+    top: 62px;
+    position: relative;
+}
+
+.carousel__products_img {
+    width: 30vw;
+    max-width: 566px;
+    display: block;
+}
+
 @media screen  and (min-width: 769px) and (max-width: 1200px) {
     .home-destaque__img {
         width: 58%;
@@ -145,6 +165,24 @@
         grid-template-columns: 1fr;
         padding: 0 28px;
     }
+
+    .carousel__products {
+        grid-template-columns: repeat(2, max-content);
+        justify-content: center;
+        column-gap: 14px;
+        row-gap: 24px;  
+        padding: 0 26px; 
+    }
+
+    .carousel__products_img  {
+        width: 42vw;
+    }
+
+    .product3 {
+        grid-column: 1/3;
+        width: 88vw;
+        max-width: none;
+    }
 }
 
 @media screen and  (min-width: 415px) {
diff --git a/assets/styles/css/reset.css b/assets/styles/css/reset.css
index 5d8fe9b..7849c3d 100644
--- a/assets/styles/css/reset.css
+++ b/assets/styles/css/reset.css
@@ -26,7 +26,6 @@ body {
     line-height: 1;
     font-family: 'Inter', sans-serif;
     color: #000;
-    background: #e5e5e5;
 }
 ol, ul {
     list-style: none;
diff --git a/index.html b/index.html
index 4733955..6435366 100644
--- a/index.html
+++ b/index.html
@@ -52,9 +52,9 @@
 
         <section class="carousel">
             <div class="carousel__products">
-                <img src="/assets/images/product1.png" alt="Imagem do Produto 1" class="carousel__products_img">
-                <img src="/assets/images/product2.png" alt="Imagem do Produto 2" class="carousel__products_img">
-                <img src="/assets/images/product3.png" alt="Imagem do Produto 3" class="carousel__products_img">
+                <img class="carousel__products_img" src="/assets/images/product1.png" alt="Imagem do Produto 1" >
+                <img class="carousel__products_img " src="/assets/images/product2.png" alt="Imagem do Produto 2" >
+                <img class="carousel__products_img product3" src="/assets/images/product3.png" alt="Imagem do Produto 3" ">
             </div>
         </section>