fix( resolução ): ajustando a resulução dos bottom Cards

ajustando a resolução dos bottom cards para tela 4k e 320px

assets/Css/Styles.css

@@ -141,32 +141,32 @@ background: #000000;
     font-size: 16px;
     line-height: 24px;
 }
-.BottomDescription{
+.BottomInfoCard{
     display: flex;
-    align-items: center;
     justify-content: center;
-    padding: 108px 0 50px;
+    align-items: center;
+    padding: 0 0 87px;
 }
-.BlockText{
+.BoxText{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    height: 158px;
+    height: 182px;
+    max-width: 766px;
 }
 .BotdescriptionTitlte{
+    width: 55%;
     font-weight: 600;
     font-size: 32px;
-    line-height: 40px;
+    line-height: 38px;
-    text-align: center;
 }
 .Botdescription{
-    width: 550px;
-    height: 120px;
     font-weight: 400;
+    text-align: center;
+    padding: 0 52px;
     font-size: 16px;
     line-height: 24px;
-    text-align: center;
 }
 .downBannerBox{
     display: flex;
@@ -174,7 +174,7 @@ background: #000000;
     padding: 50px 0 106px;
 }
 .lastBanner{
-    width: 100%;
+    width: 70%;
 }
 .footer{
     padding: 38px 0;
@@ -226,20 +226,15 @@ background: #000000;
             max-width: 358px;
             max-height: 116px;
         }
-        .BotomDescription{
+        .Botdescription{
-            padding: 50px 32px 87px;
+            padding: 0 32px 0;
         }
        
         .BotdescriptionTitlte{
+            width: 90%;
             font-size: 24px;
             line-height: 30px;
-        }
+            text-align: center;
-        .Botdescription{
-            font-size: 16px;
-            line-height: 24px;
-            padding: 0 28px;
-            max-width: 358px;
-            max-height: 116px;
         }
         .Cards{
             grid-template-columns: 1fr;
@@ -269,6 +264,9 @@ background: #000000;
         .img3{
             grid-area:img3;
         }
+        .lastBanner{
+            width: 100%;
+        }
         .BottomDescription{
                 padding: 50px 0 87px;
         }
@@ -280,6 +278,12 @@ background: #000000;
             display: flex;
             flex-direction: column-reverse;
         }
+        .downBannerBox{
+            display: flex;
+            justify-content: center;
+            padding: 0 0 50px;
+        }
+        
 }
 @media screen and (min-width: 1024px) {
     .MainBannerMobile,.footermob{
@@ -321,4 +325,25 @@ background: #000000;
         font-size: 38px;
         line-height: 28px;
     }
+    .BoxText{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        height: 400px;
+        max-width: 800px;
+    }
+    .BotdescriptionTitlte{
+        width: 90%;
+        font-size: 50px;
+        line-height: 50px;
+        text-align: center;
+    }
+    .Botdescription{
+        font-size: 34px;
+        line-height: 50px;
+        padding: 0 28px;
+        max-width: 746px;
+        max-height: 242px;
+    }
 }

index.html

@@ -113,12 +113,15 @@
                     </figure>
                 </div>
                 <div class="bottomwarp">
-                    <section class="BottomDescription">
+                    <section class="BottomInfoCard">
-                        <div class="BlockText">
+                        <div class="BoxText">
-                            <h2 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h2>
+                            <h1 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h1>
-                            <p class="Botdescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 
+                            <p class="Botdescription">
-                                Quisque  a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
+                                Lorem ipsum dolor sit amet, 
-                                Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+                                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>
                     </section>