From 3b440b0a662e0e296824911fa8c50728f9c579c7 Mon Sep 17 00:00:00 2001
From: Sergey <32025367+sergeyyarkov@users.noreply.github.com>
Date: Mon, 26 Aug 2019 18:15:15 +0300
Subject: [PATCH] Create media.css

---
 src/styles/media.css | 88 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 src/styles/media.css

diff --git a/src/styles/media.css b/src/styles/media.css
new file mode 100644
index 0000000..582a378
--- /dev/null
+++ b/src/styles/media.css
@@ -0,0 +1,88 @@
+@media (max-width: 920px) {
+    #catalogue .catalogue-content {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    #catalogue .catalogue-content .item {
+        margin-left: 10px;
+        margin-top: 10px;
+    }
+}
+@media (max-width: 919px) {
+    #services .services-content {
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+    #services .service {
+        margin-top: 15px;
+    }
+}
+@media (max-width: 868px) {
+    #advantages .advantages-content {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    #advantages .advantage {
+        margin-top: 15px;
+    }
+}
+@media (max-width: 768px) {
+    header .header-content_top {
+        flex-direction: column;
+        align-items: center;
+    }
+    header .header-info {
+        margin-top: 25px;
+    }
+}
+@media (max-width: 679px) {
+    #popular-items .pop-item {
+        width: 250px;
+    }
+}
+@media (max-width: 660px) {
+    header .header-content_bottom ul {
+        flex-direction: column;
+        align-items: center;
+    }
+    header .header-content_bottom ul li {
+        margin-top: 10px;
+    }
+}
+@media (max-width: 619px) {
+    #catalogue .catalogue-content .item {
+        margin-left: 0px;
+    }
+}
+@media (max-width: 576px) {
+    #popular-items .popular-items_content {
+        justify-content: space-around;
+    }
+}
+@media (max-width: 519px) {
+    #popular-items .pop-item {
+        width: 80%;
+    }
+}
+@media (max-width: 440px) {
+    header .header-info {
+        margin-top: 20px;
+    }
+    header .header-info p {
+        display: block;
+        padding: 0;
+        margin-bottom: 10px;
+        text-align: center;
+    }
+    header .header-info button {
+        width: 100%;
+    }
+}
+@media (max-width: 420px) {
+    #main-info .more-info span {
+        display: block;
+        padding-left: 0;
+        margin-top: 20px;
+        font-size: 13px;
+    }
+}