diff --git a/assets/css/styles.css b/assets/css/styles.css
index e92ff32..445e3b0 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -10,6 +10,27 @@
display: block;
}
+.information {
+ max-width: 1215px;
+ margin: 0 auto;
+ padding: 5.25rem 1.625rem 5.875rem 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.information {
+ --grid-space: 5.4375rem 7.75rem;
+}
+
+.information-subtitle {
+ font-weight: 400;
+}
+
+.information-title {
+ font-weight: 500;
+ margin-bottom: 19px;
+}
/*= =*\
= UTILS =
@@ -21,6 +42,7 @@
.center {
align-items: center;
justify-content: center;
+ gap: var(--grid-space);
}
.text-upper {
@@ -39,6 +61,27 @@
background-color: var(--gradient-blue-180);
}
+@media screen and (max-width:768px) {
+ .sm-wrapper {
+ flex-direction: column;
+ }
+}
+
+
+@media screen and (min-width: 769px) {
+ .information {
+ padding: 5rem 0 5.875px 0;
+ }
+
+ .information-title {
+ font-size: 3rem;
+ }
+
+ .information-subtitle {
+ font-size: 2rem;
+ }
+}
+
@media screen and (max-width: 414px) {
.hero-image-desktop {
display: none;
diff --git a/index.html b/index.html
index 085928a..f365286 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
M3 Amazing Landing page
- 
+
+ 
+