diff --git a/assets/styles/main.css b/assets/styles/main.css
index af7dab3..b998f09 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -93,6 +93,24 @@ body {
text-align: center;
}
+/*Adiciona banner do meio*/
+.middle-banner {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ padding: 60px 70px 130px;
+ margin-bottom: 130px;
+ gap: 40px;
+ width: 100%;
+ max-height: 27vw;
+ background: #E0E0E0;
+}
+
+.middle-banner-image img {
+ display: block;
+ max-width: 100%;
+ height: auto;
+}
+
/*Media Querie*/
@media screen and (max-width: 414px) {
.main-banner {
@@ -130,6 +148,27 @@ body {
width: 100%;
max-width: 240px;
}
+
+ .middle-banner {
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(2, 1fr);
+ padding: 30px 23px 0;
+ margin-bottom: 80px;
+ gap: 14px;
+ }
+
+ .middle-banner-image:nth-child(1) {
+ order: 2;
+ }
+
+ .middle-banner-image:nth-child(2) {
+ order: 1;
+ }
+
+ .middle-banner-image:nth-child(3) {
+ grid-column: 1 / span 2;
+ order: 3;
+ }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
diff --git a/index.html b/index.html
index 82ac053..6ddf9cc 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@@ -50,7 +50,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@@ -58,13 +58,31 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.