From 04a4f0cae90fc7eb81770fa417af4e86a4340fd3 Mon Sep 17 00:00:00 2001
From: LeonardoPereiraRocha <rochaleo879@gmail.com>
Date: Thu, 13 Oct 2022 10:33:59 -0300
Subject: [PATCH] Ajusta imagens do meio para o mobile

---
 assets/styles/style.css | 31 ++++++++++++++++++++++++++++++-
 index.html              |  8 ++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/assets/styles/style.css b/assets/styles/style.css
index ff65408..2d3bfc8 100644
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -15,6 +15,10 @@ body{
     background-color: #000;
 }
 
+.logo-header{
+    margin: 29px 0;
+}
+
 .logo-header, .main-banner-desktop{
     width: 100%;
     display: block;
@@ -293,8 +297,33 @@ a {
     }
 
     .photo-desktop{
-        display: none;
+      display: none;
     }
+
+    .middle-photo-mobile{
+        background-color: #E0E0E0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .photo-mobile{
+        display: block;
+        max-width: 80%;
+        align-items: center;
+        position: relative;
+        margin-bottom: -62px;
+        
+    }
+    
+    .photo,.photo-desktop{
+        position: relative;
+        margin-bottom: 24px;
+        margin-top: 32px;
+        max-width: 100%;
+        width: 100%;
+    }
+
 }
 
 @media screen and (min-width: 769px) and (max-width: 1250px){
diff --git a/index.html b/index.html
index ffebcad..c5ffa9e 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,7 @@
             </div>
         </section>
 
-        <div>
+        
             <div class="middle-photo">
                 
                     <img  class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
@@ -72,9 +72,13 @@
       
                     <img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
             </div>
-                    <img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
+            <div class="middle-photo-mobile">
+                <img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
         </div>
 
+          
+        
+
         <section class="second-card">
             <div class="card-2">
                 <img  class="card2-image" src = "./assets/img/second-card-image-1.png" alt="Primeira imagem do card inferior" />