From 134f3dcf92662a9d6e55bf450c1a488ff28ac3b8 Mon Sep 17 00:00:00 2001
From: Maksim Tananykin <maks.tananykin.20177@mail.ru>
Date: Tue, 18 Oct 2022 12:59:13 +0300
Subject: [PATCH] add new media-queires

---
 css/style.css | 27 +++++++++++++++++++++++++++
 style.scss    | 49 +++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index fa64050..b9e424b 100644
--- a/css/style.css
+++ b/css/style.css
@@ -216,6 +216,7 @@ main {
   display: flex;
   justify-content: space-between;
   margin: 15px 0 10px 13px;
+  flex-wrap: wrap;
 }
 .card-inf__item {
   font-size: 10px;
@@ -509,4 +510,30 @@ footer {
     width: 60%;
     margin: 0 auto;
   }
+}
+@media (max-width: 460px) {
+  .card__describe {
+    min-height: 120px;
+  }
+  .card-inf__item {
+    font-size: 8px;
+  }
+  .card-inf__item::before {
+    top: -2px;
+  }
+  .card-description {
+    display: block;
+  }
+  .settings {
+    font-size: 10px;
+  }
+  .settings .ended {
+    margin-top: 10px;
+  }
+  .settings .ended::before {
+    top: -7px;
+  }
+  .footer .about {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/style.scss b/style.scss
index a952891..49bce5d 100644
--- a/style.scss
+++ b/style.scss
@@ -220,6 +220,7 @@ main {
     display: flex;
     justify-content: space-between;
     margin: 15px 0 10px 13px;
+    flex-wrap: wrap;
 
     &__item {
       font-size: 10px;
@@ -235,8 +236,10 @@ main {
       }
     }
 
-    .date::before {
-      content: url("../icons/calendar2.svg");
+    .date {
+      &::before {
+        content: url("../icons/calendar2.svg");
+      }
     }
   }
 
@@ -484,7 +487,7 @@ footer {
       .card-inf__item {
         margin-top: 10px;
       }
-      .enroll{
+      .enroll {
         margin-top: 10px;
       }
     }
@@ -538,7 +541,7 @@ footer {
     }
   }
 
-  .about__image{
+  .about__image {
     width: 100%;
   }
 
@@ -572,3 +575,41 @@ footer {
     }
   }
 }
+
+@media (max-width: 460px) {
+  .card{
+    &__describe {
+      min-height: 120px;
+    }
+
+    &-inf__item {
+      font-size: 8px;
+  
+      &::before {
+        top: -2px;
+      }
+    }
+
+    &-description{
+      display: block;
+    }
+  }
+
+  .settings {
+    font-size: 10px;
+
+    .ended {
+      margin-top: 10px;
+
+      &::before {
+        top: -7px;
+      }
+    }
+  }
+
+  .footer {
+    .about {
+      width: 100%;
+    }
+  }
+}