feat(section) Alteração na section icons, resulvido problema na proporção mobile

assets/styles/style.css

@@ -0,0 +1,240 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
+ *{
+   margin: 0;
+   padding: 0;
+ }
+html, body{
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+    color: black;
+ }
+.header{
+   background: black;
+   display: flex;
+   justify-content: center;
+   padding: 28px 0;
+}
+.imgLogoM3{
+   display: block;
+}
+.main-banner{
+   width: 100%;
+   display: block;
+}
+/*---------------------------------------------------------------------------------------*/
+.top-infocard{
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   margin-top: 80px;
+   margin-bottom: 95px;
+}
+.top-infocard-text{
+   max-width: 766px;
+   margin-right: 124px;
+}
+.top-infocard-subtitle{
+   font-weight: 400;
+   font-size: 32px;
+   text-transform: uppercase;
+}
+.top-infocard-title{
+   font-weight: 500;
+   font-size: 48px;
+   text-transform: uppercase;
+}
+.top-infocard-description{
+   font-weight: 400;
+   font-size: 16px;
+   margin-top: 24px;
+}
+
+
+/*-------------------------------------------------------------------*/
+
+.section-background{
+   display: flex;
+   background:#F0F0F0;
+   justify-content: center;
+   gap: 20px;
+   padding: 74px 0;
+}
+.section-cards{
+   display: flex;
+   flex-direction: column;
+   flex-wrap: wrap;
+   align-items: center;
+   background: #FFFFFF;
+   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+   max-width: 350px;
+   padding: 26px 26px 34px;
+}
+.section-img-cards{
+   display: block;
+   margin-bottom: 26px;
+}
+.section-p-card{
+   max-width: 300px;
+   font-weight: 400;
+   font-size: 16px;
+   line-height: 24px;
+   text-align: center;
+}
+/*----------------------------------------------------------------*/
+
+.img-pc{
+   width: 100%;
+   display: block;
+   margin-bottom: 142px;
+}
+
+/*------------------------------------------------------------------*/
+
+.section-icon{
+   background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
+   padding-bottom: 68px;
+   padding: 36px 32px;
+
+}
+.section-wrapper{
+   display: grid;
+   grid-template-columns: repeat(2, max-content);
+   justify-content: center;
+   gap: 20px;
+   position: relative;
+   top: -60px;
+   
+}
+.section-icons{
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   background: #FFFFFF;
+   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+   padding: 36px 32px 66px;
+}
+.img-section-icon{
+   margin-bottom: 14px;
+   display: block;
+}
+.section-icons-p{
+   max-width: 368px;
+   font-size: 16px;
+   line-height: 24px;
+   text-align: center;
+}
+/*----------------------------------------------------------------------*/
+
+@media screen and (max-width: 1024px) {
+   .main-banner-desktop{
+      display: none;
+   }
+   .img-pc-descktop{
+      display: none;
+   }
+   .top-infocard{
+      flex-direction: column;
+      margin-top: 54px;
+      margin-left: 31px;
+      margin-right: 26px;
+      margin-bottom: 158px;
+   }
+   .top-infocard-text{ 
+      margin: 0 0 68px;
+      
+   }
+   .top-infocard-subtitle{
+      font-weight: 400;
+      font-size: 20px;
+   }
+   .top-infocard-title{
+      font-weight: 500;
+      font-size: 28px;
+   }
+   .top-infocard-description{
+      font-weight: 400;
+      font-size: 16px;
+      margin-top: 19px;
+   }
+   .top-infocard-img{
+      margin: 0 86px 0 86px;
+      max-width: 240px;
+   }
+   /*------------------------------------------------------------------*/
+   .section-background{
+      display: flex;
+      flex-direction: column;
+      padding: 36px 32px;
+      align-items: center;
+   }
+   /*------------------------------------------------------------------*/
+   .img-pc{
+      margin-bottom: 135px;
+   }
+   .section-icon{
+      padding-bottom: 19px;
+      padding: 0 23px;
+   }
+   .section-icons-p{
+      max-width: 302px;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+      
+   }
+   .section-wrapper{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      top: -80px;
+   }
+   .section-icons{
+      max-width: 302px;
+      font-size: 14px;
+      line-height: 24px;
+      text-align: center;
+   }
+
+}
+
+   
+@media screen and (min-width: 1025px) {
+   .main-banner-mobile{
+      display: none;
+   }
+   .img-pc-mobile{
+      display: none;
+   }
+   
+}
+   
+@media screen and (min-width: 1026px) and (max-width: 1220px){
+   .top-infocard-text{ 
+      max-width: 550px;
+      margin-right: 70px;
+   
+}
+}
+
+@media screen and (min-width: 2500px) {
+   .top-infocard-subtitle{
+      font-weight: 400;
+      font-size: 60px;
+   }
+   .top-infocard-title{
+      font-weight: 500;
+      font-size: 96px;
+   }
+   .top-infocard-description{
+      font-weight: 400;
+      font-size: 32px;
+     
+   }
+   .top-infocard-text{ 
+      max-width: 45%;
+      margin-right: 70px;
+   
+}
+
+}
+/*---------------------------------------------------------------*/

index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Landing Page</title>
+    <link rel="stylesheet" href="./assets/styles/style.css">
+</head>
+
+<body>
+
+    <header class="header">
+        <a href="/">
+            <img class="imgLogoM3" src="./assets/images/logo_M3.png" alt="logo M3">
+        </a>
+    </header>
+
+    <main>
+        <section>
+            <img class="main-banner main-banner-desktop" src="./assets/images/img-notebook-desktop.png"
+                alt="imagem notebook principal">
+            <img style="border: none;" class="main-banner main-banner-mobile"
+                src="./assets/images/img-notebook-mobile.png" alt="imagem notebook principal">
+        </section>
+
+        <section class="top-infocard">
+
+            <div class="top-infocard-text">
+
+                <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+
+                <h1 class="top-infocard-title">dolor sit amet</h1>
+
+                <p class="top-infocard-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.
+                </p>
+
+            </div>
+
+            <img class="top-infocard-img" src="./assets/images/img-tres-computadores.png" alt="Icone três computadores">
+
+        </section>
+
+    </main>
+
+    <div class="section-background">
+
+        <section class="section-cards">
+            <img class="section-img-cards" src="./assets/images/Icons/loja.png" alt="Imagem pequena de uma loja">
+            <p class="section-p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
+        </section>
+
+        <section class="section-cards">
+            <img class="section-img-cards" src="./assets/images/Icons/sacola.png" alt="Imagem pequena de uma sacolinha">
+            <p class="section-p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
+        </section>
+
+        <section class="section-cards">
+            <img class="section-img-cards" src="./assets/images/Icons/mao.png" alt="Imagem pequena de uma mão com uma cedula">
+            <p class="section-p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
+        </section>
+
+    </div>
+
+
+    <div>
+        <img class="img-pc img-pc-descktop" src="./assets/images/img-pc-descktop.png" alt="Imagem notebook tela colorida">
+        <img class="img-pc img-pc-mobile" src="./assets/images/img-pc-mobile.png" alt="Imagem notebook tela colorida">
+    </div>
+
+    <div class="section-icon">
+        <div class="section-wrapper">
+        <section class="section-icons">
+            <img class="img-section-icon" src="./assets/images/Icons/notaDinheiro.png" alt="Iagem dinheiro">
+            <p class="section-icons-p">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.</p>
+        </section>
+
+        <section class="section-icons">
+            <img class="img-section-icon" src="./assets/images/Icons/mao.png" alt="Iagem de uma mão">
+            <p class="section-icons-p">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.</p>
+        </section>
+
+        <section class="section-icons">
+            <img class="img-section-icon" src="./assets/images/Icons/sacola.png" alt="Iagem dinheiro">
+            <p class="section-icons-p">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.</p>
+        </section>
+
+        <section class="section-icons">
+            <img class="img-section-icon" src="./assets/images/Icons/celular.png" alt="Iagem dinheiro">
+            <p class="section-icons-p">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.</p>
+        </section>
+         </div>
+    </div>
+
+</body>
+
+</html>