From 1ec6893de9557e8198710a68f4fd0f922c66c2dc Mon Sep 17 00:00:00 2001
From: Saulo Klein Nery <saulokn@outlook.com>
Date: Mon, 24 Oct 2022 14:47:28 -0300
Subject: [PATCH] perf: Altera a forma de renderizar os banners superiores e
 inferiores da pagina

---
 index.html      | 18 ++++++++++--------
 styles/main.css | 14 ++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 74e29e2..ea6bcba 100644
--- a/index.html
+++ b/index.html
@@ -26,10 +26,11 @@
 
         <main>
             <div>
-                <figure>
-                    <img class="main-banner main-banner-desktop" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal Desktop">
-                    <img class="main-banner main-banner-mobile" src="./assets/imgs/main-banner-mobile.png" alt="Banner Principal Mobile">
-                </figure>
+                <picture>
+                    <source media="(max-width: 1024px)" srcset="./assets/imgs/main-banner-mobile.png">
+                    <source media="(min-width: 1025px)" srcset="./assets/imgs/main-banner-desktop.png">
+                    <img class="main-banner" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal">
+                </picture>
             </div>
     
             <section class="top-infocard">
@@ -160,10 +161,11 @@
                     </p>
                 </div>
     
-                <figure class="bottom-article-figure">
-                    <img class="bottom-banner bottom-banner-desktop" src="./assets/imgs/bottom-banner-desktop.png" alt="Banner Inferior Desktop">
-                    <img class="bottom-banner bottom-banner-mobile" src="./assets/imgs/bottom-banner-mobile.png" alt="Banner Inferior Mobile">
-                </figure>
+                <picture class="bottom-article-picture">
+                    <source media="(max-width: 1024px)" srcset="./assets/imgs/bottom-banner-mobile.png">
+                    <source media="(min-width: 1025px)" srcset="./assets/imgs/bottom-banner-desktop.png">
+                    <img class="bottom-banner" src="./assets/imgs/bottom-banner-desktop.png" alt="Banner Inferior">
+                </picture>
             </article>
         </main>
 
diff --git a/styles/main.css b/styles/main.css
index 6f58433..9daddb7 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -154,7 +154,7 @@ body{
     max-width: 29%;
 }
 
-.bottom-article-figure{
+.bottom-article-picture{
     width: 71%;
 }
 
@@ -195,11 +195,6 @@ body{
 }
 
 @media screen and (max-width: 1024px){
-    .main-banner-desktop,
-    .bottom-banner-desktop{
-        display: none;
-    }
-
     .top-infocard{
         margin-bottom: 90px;
     }
@@ -293,7 +288,7 @@ body{
         line-height: 29px;
     }
 
-    .bottom-article-figure{
+    .bottom-article-picture{
         width: 100%;
     }
 
@@ -308,11 +303,6 @@ body{
 }
 
 @media screen and (min-width: 1025px){
-    .main-banner-mobile,
-    .bottom-banner-mobile{
-        display: none;
-    }
-
     .top-infocard-description{
         text-align: left;
     }