banner media size

css/style.css

@@ -3,13 +3,25 @@ body {
 }
 
 .sec-00 {
-  height: 230px;
+  height: 295px;
   -webkit-transition-property: height;
   transition-property: height;
   -webkit-transition-duration: 300ms;
           transition-duration: 300ms;
 }
 
+@media (max-width: 1850px) {
+  .sec-00 {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00 {
+    height: 230px;
+  }
+}
+
 @media (max-width: 1100px) {
   .sec-00 {
     height: 200px;
@@ -44,7 +56,19 @@ body {
 
 .sec-00 .container-fluid {
   background-color: #cacaca;
-  height: 230px;
+  height: 295px;
+}
+
+@media (max-width: 1850px) {
+  .sec-00 .container-fluid {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00 .container-fluid {
+    height: 230px;
+  }
 }
 
 @media (max-width: 1100px) {
@@ -57,18 +81,42 @@ body {
   margin: 0 auto;
   width: 70%;
   height: 100%;
-  max-width: 1010px;
+  max-width: 1344px;
+}
+
+@media (max-width: 1850px) {
+  .sec-00__slider {
+    max-width: 1176px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00__slider {
+    max-width: 1010px;
+  }
 }
 
 .sec-00__slider .slide-item {
   width: 100%;
-  height: 230px;
+  height: 295px;
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 
+@media (max-width: 1850px) {
+  .sec-00__slider .slide-item {
+    height: 260px;
+  }
+}
+
+@media (max-width: 1550px) {
+  .sec-00__slider .slide-item {
+    height: 230px;
+  }
+}
+
 @media (max-width: 1100px) {
   .sec-00__slider .slide-item {
     height: 200px;

css/style.scss

@@ -3,9 +3,15 @@ body {
 }
 
 .sec-00 {
-    height: 230px;
+    height: 295px;
     transition-property: height;
     transition-duration: 300ms;
+    @media (max-width: 1850px) {
+        height: 260px;
+    }
+    @media (max-width: 1550px) {
+        height: 230px;
+    }
     @media (max-width: 1100px) {
         height: 200px;
     }
@@ -32,7 +38,13 @@ body {
     }
     .container-fluid {
         background-color: rgb(202, 202, 202);
-        height: 230px;
+        height: 295px;
+        @media (max-width: 1850px) {
+            height: 260px;
+        }
+        @media (max-width: 1550px) {
+            height: 230px;
+        }
         @media (max-width: 1100px) {
             height: 200px;
         }
@@ -41,14 +53,26 @@ body {
         margin: 0 auto;
         width: 70%;
         height: 100%;
-        max-width: 1010px;
+        max-width: 1344px;
+        @media (max-width: 1850px) {
+            max-width: 1176px;
+        }
+        @media (max-width: 1550px) {
+            max-width: 1010px;
+        }
         .slide-item {
             width: 100%;
-            height: 230px;
+            height: 295px;
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
             cursor: pointer;
+            @media (max-width: 1850px) {
+                height: 260px;
+            }
+            @media (max-width: 1550px) {
+                height: 230px;
+            }
             @media (max-width: 1100px) {
                 height: 200px;
             }