add new media-queires

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;
@@ -510,3 +511,29 @@ footer {
     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%;
+  }
+}

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,10 +236,12 @@ main {
       }
     }
 
-    .date::before {
+    .date {
+      &::before {
         content: url("../icons/calendar2.svg");
       }
     }
+  }
 
   .subscribe {
     display: inline-block;
@@ -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%;
+    }
+  }
+}