feat: media querys

assets/styles/main.css

@@ -11,6 +11,7 @@ body {
 
 .page-header {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     padding: 28px 0;
     background: #000000
@@ -22,12 +23,14 @@ body {
 
 .main-banner {
     width: 100%;
+    flex-wrap: wrap;
     margin-bottom: 73px;
 }
 
 .top-infocard {
     display: flex;
     width: 100%;
+    flex-wrap: wrap;
     align-items: center;
     flex-direction: column;
     text-align: center;
@@ -35,11 +38,13 @@ body {
 
 .top-infocard-text {
     max-width: 766px;
+    flex-wrap: wrap;
 }
 
 .top-infocard-subtitle {
     text-transform: uppercase;
     line-height: 39px;
+    flex-wrap: wrap;
     font-weight: 400;
     font-size: 32px;
     margin-top: 28px;
@@ -129,4 +134,18 @@ body {
         display: none;
         padding: 84px 30px 158px;
     }
+}
+
+@media screen and (max-width:1024px) {
+    .main-banner-desktop {
+        display: none;
+        
+    }
+}
+
+@media screen and (min-width:1025px) {
+    .main-banner-mobile {
+        display: none;
+        padding: 84px 30px 158px;
+    }
 }