Fazendo a responsividade da página home

styles.css

@@ -38,9 +38,11 @@ body{
   height: 100%;
   max-width: 1200px;
   margin: 0 auto;
+  padding: 1.2rem 1.5rem;
 }
 .row{
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
@@ -68,40 +70,33 @@ body{
 
 /*página inicial*/
 main{
-  height: 80%;
+  height: 75%;
 }
 /*Header*/
-.header{
-  height:15%;
-}
-.header > .container > .row{
-  justify-content: space-between;
-}
 .header__logo{
-  width: 25%;
+  width: 75%;
 }
 .header__list{
-  width: 50%;
+  width: 100%;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-evenly;
   align-items: center;
-  column-gap: 10px;
 }
 .list__item{
-  padding: 5px 20px;
+  padding: 5px 10px;
   background-color: var(--btn-primary);
   border-radius: 4px;
   cursor: pointer;
-  transition: all 100ms ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .list__item--link{
   color: #1d1d2e;
-  transition: all 100ms ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .list__item:hover{
-  transform: translateY(-2px);
+  transform: scale(1.1);
   background-color: var(--btn-hover-color);
   border: 1px solid var(--border-color);
 
@@ -113,14 +108,8 @@ main{
 
 
 /*Hero*/
-.hero{
-  height: 100%
-}
-.hero > .container > .row{
-  justify-content: space-between;
-}
 .hero__content{
-  width: 40%;
+  width: 100%;
 }
 .hero__content h2{
   font-family: var(--poppins);
@@ -129,17 +118,20 @@ main{
   margin-bottom: 10px;
 }
 .hero__form{
-  width: 40%;
+  width: 100%;
 }
 .newsletter{
   width: 100%;
+  height: 80px;
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   align-items: stretch;
   margin-top: 10px;
+  gap: 5px;
 }
 .input-group{
-  width: 79%;
+  width: 100%;
   height: 40px;
   display: flex;
   justify-content: center;
@@ -150,8 +142,6 @@ main{
   width: 100%;
   height: 100%;
   padding-left: 5px;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
 }
 .input-group input::placeholder{
   color: #101026;
@@ -160,10 +150,9 @@ main{
   outline: none;
 }
 .form__btn{
-  width: 20%;
+  width: 100%;
+  height: 40px;
   background-color: var(--btn-primary);
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
   cursor: pointer;
 }
 
@@ -190,18 +179,90 @@ main{
 
 
 
-
-
-
-
-
 /*footer*/
 .footer{
-  height:5%;
+  height:20px;
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-bottom:1rem;
 }
 .footer__copy{
   font-size: 12px;
 }
+
+
+
+
+
+/* Small devices (landscape phones, 576px and up)*/
+@media (min-width: 576px) {
+  .header{
+    height: 80px;
+  }
+  .header .container .row {
+    flex-direction: row;
+    justify-content: space-around;
+  }
+  .header__logo{
+    width: 25%;
+  }
+  .header__list{
+    width: 75%;
+    justify-content: flex-end;
+    column-gap: 8px;
+  }
+
+  main{
+    height: calc(100% - 100px);
+  }
+
+}
+
+/* Medium devices (tablets, 768px and up)*/
+@media (min-width: 768px) {
+  .hero{
+    height: 100%;
+  }
+  .hero .container .row{
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+
+
+}
+
+/* Large devices (desktops, 992px and up)*/
+@media (min-width: 992px) {
+  .newsletter{
+    flex-direction: row;
+  }
+  .hero__content{
+    width: 40%;
+  }
+  .hero__form{
+    width: 40%;
+  }
+  .input-group{
+    width: 79%;
+  }
+  .form__btn{
+    width: 20%;
+  }
+}
+
+/* X-Large devices (large desktops, 1200px and up)*/
+@media (min-width: 1200px) {
+  .hero{
+    background: url(https://images.pexels.com/photos/16668845/pexels-photo-16668845.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    background-attachment: fixed;
+
+  }
+}
+
+/* XX-Large devices (larger desktops, 1400px and up)*/
+@media (min-width: 1400px) {}