add media-quries

css/style.css

@@ -283,6 +283,9 @@ footer {
   justify-content: space-between;
   width: 60%;
 }
+.footer .item {
+  margin-right: 5px;
+}
 .footer .item a {
   display: block;
   width: 25px;
@@ -416,4 +419,92 @@ footer {
 }
 .see:hover {
   background-color: rgba(141, 97, 2, 0.468);
+}
+
+@media (max-width: 1024px) {
+  .cards {
+    grid-template-columns: repeat(2, 49%);
+    grid-column-gap: 20px;
+  }
+  .about-more {
+    flex-direction: column;
+    align-items: center;
+  }
+  .about__image {
+    margin-bottom: 20px;
+  }
+  .about-text {
+    width: 100%;
+  }
+  .about-text .card-inf__item {
+    margin-top: 10px;
+  }
+  .about-text .enroll {
+    margin-top: 10px;
+  }
+}
+@media (max-width: 820px) {
+  .settings-rest {
+    width: 50%;
+  }
+  .nav-header {
+    width: 50%;
+  }
+  .footer .about {
+    width: 40%;
+  }
+}
+@media (max-width: 640px) {
+  header {
+    height: 90px;
+  }
+  .header {
+    flex-direction: column;
+    justify-content: center;
+    padding-top: 10px;
+  }
+  .nav-header {
+    margin-top: 10px;
+    width: 80%;
+  }
+  .sort {
+    margin-top: 5px;
+  }
+  .settings-rest {
+    flex-wrap: wrap;
+  }
+  .settings-rest p {
+    margin-left: 20px;
+    margin-top: 5px;
+  }
+  .settings-rest .ended {
+    margin-left: 27px;
+  }
+  .about__image {
+    width: 100%;
+  }
+  .logo {
+    text-align: center;
+  }
+  .footer {
+    display: block;
+  }
+  .footer .text {
+    width: 100%;
+  }
+  .footer .networks {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .footer .networks .text {
+    text-align: center;
+  }
+  .footer .networks .social {
+    width: 40%;
+    margin: 0 auto;
+  }
+  .footer .about {
+    width: 60%;
+    margin: 0 auto;
+  }
 }