Media querys for gallery

css/gallery-media-query.css

@@ -0,0 +1,44 @@
+@media screen and (min-width: 400px) {
+    .section-two .section-two__gallery{
+        height: 35vh;
+    }
+}
+
+@media screen and (min-width: 550px) {
+    .section-two .section-two__gallery{
+        height: 40vh;
+    }
+}
+
+@media screen and (min-width: 700px) {
+    .section-two .section-two__gallery{
+        height: 50vh;
+    }
+}
+@media screen and (min-width: 800px) {
+    .section-two .section-two__gallery{
+        height: 60vh;
+    }
+}
+@media screen and (min-width: 900px) {
+    .section-two .section-two__gallery{
+        height: 65vh;
+    }
+}
+@media screen and (min-width: 1000px) {
+    .section-two .section-two__gallery{
+        height: 70vh;
+    }
+}
+@media screen and (min-width: 1200px) {
+    .section-two{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .section-two .section-two__gallery{
+        height: 80vh;
+        width: 1200px;
+        box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
+    }
+}

css/styles.css

@@ -4,6 +4,7 @@
 @import url("./section-three.css");
 @import url("./section-four.css");
 @import url("./footer.css");
+@import url("./gallery-media-query.css");
 
 :root {
     --font-title: 'Open Sans', sans-serif;