add mobile media css

style.css

@@ -90,6 +90,9 @@ a{
     display: flex;
     flex: 1;
   }
+
+
+
   #main > article {
     flex: 1;
   }
@@ -101,12 +104,14 @@ a{
   #main > #left {
     order: -1;
   }
+  
 
   #left{
     max-width: 330px;
     display: flex;
     flex-direction: column;
     margin-right: 28px;
+    border-right: 28px solid #F2F2F2;
 
   }
 
@@ -115,7 +120,8 @@ a{
     max-width: 330px;
     display: flex;
     flex-direction: column;
-
+    border-left: 1px solid #E9EAEB;
+    padding-left: 12px;
   }
 
   header{
@@ -137,6 +143,105 @@ a{
     }
 
 
+    #footer_up{
+      width: 20%;
+      text-align: right;
+    }
+
+  #footer_info{
+    display: flex;
+    margin-bottom: 8px;
+
+  }  
+
+  #footer_qr{
+    width: 300px;
+    margin-right: 12px;
+    text-align: center;
+  }
+
+  #footer_subscript{
+    margin-left: 32px;
+    margin-right: 22px;
+    margin-top: 12px;
+  }
+
+  #footer_logo{
+    margin-left: 12px;
+    margin-right: 32px;
+    width: 150px;
+
+  }
+
+  #footer_social{
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+
+  .sub_button {
+    background: #F18129;
+    border-radius: 55px;
+    border: 1px solid #F18129;
+    color: white;
+    padding: 10px 28px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    font-size: 11px;
+  }
+
+  .vazh{
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.45em;
+  }
+
+  #footer_2{
+    display: flex;
+  }
+
+  #footer_3{
+    display: flex;
+    margin-top: 12px;
+  }  
+
+  #rating{
+    width: 20%;
+    text-align: right;
+    margin-right: 8px;
+    margin-top: 12px;
+  }
+
+  #pere{
+    width: 40%;
+    font-size: 12px;
+    line-height: 150%;
+    color: #909294;
+  }
+
+  #copy{
+    color: #171717;
+    font-size: 13px;
+    line-height: 150%;
+    margin-right: 8px;
+    width: 300px;
+    text-align: center;
+  }
+
+  #svid{
+    display: flex;
+    color: #444444;
+    font-size: 13px;
+    line-height: 150%;
+  }
+
+  #svid li{
+    margin-right: 18px;
+  }
+
+
+
   /** - menus -- */
   ul.menu_main{
     display: flex;
@@ -213,6 +318,8 @@ a{
   #header-contact{
     display: flex;
     flex-direction: column;
+    margin-top: 12px;
+    margin-right: 12px;
   }
 
   /* +7 (495) 925 06 34 info@vetandlife.ru */
@@ -246,7 +353,41 @@ a{
     }
 
 
+  #content{
+    margin-right: 58px;
+    margin-left: 58px;
+    padding-bottom: 28px;
+    max-width: 880px;
+  }  
 
+    #content p{
+      margin-top: .5em; /* Отступ сверху */
+      margin-bottom: 1em; /* Отступ снизу */
+    }
+
+    #content IMG{
+      max-width: 700px;
+    }
+
+    .page-numbers {
+      display: inline-block;
+      padding: 5px 10px;
+      margin: 0 2px 0 0;
+      border: 1px solid #eee;
+      line-height: 1;
+      text-decoration: none;
+      border-radius: 2px;
+      font-weight: 600;
+      }
+      
+      .page-numbers.current,
+      
+      a.page-numbers:hover {
+      
+          background: #f9f9f9;
+      
+      }
+      
 
   h1{
     font-family: 'GrtskPeta';
@@ -262,6 +403,10 @@ a{
     grid-gap: 2rem;
   }
 
+  .mini-card{
+    max-width: 372px;
+  }
+
 
   .mini-card-title{
     font-family: 'GrtskPeta';
@@ -274,6 +419,24 @@ a{
   }
 
 
+#nav_content{
+  display: flex;
+  padding:0;
+  padding-bottom: 28px;
+  margin-top: 28px;
+  margin-bottom: 28px;
+  border-bottom: 1px solid #E9EAEB;
+}  
+
+  #nav_content li{
+    margin-right: 8px;
+    color: #909294;
+  }
+
+  #nav_content li a{
+    color: #909294;
+  }  
+
 .main-card{
     padding-bottom: 22px;
     margin: 8px 0 32px 0;
@@ -472,6 +635,21 @@ a{
     font-size: 13px;
   }
 
+.right_archive{
+  margin-bottom: 22px;
+}
+
+.right_archive_img{
+  width: 280px;
+}
+
+.right_archive_text{
+  font-size: 15px;
+  line-height: 130%;
+  font-weight: bold;
+
+}
+
 
 .yets_rubric{
   color: #F18129;
@@ -487,8 +665,8 @@ a{
 
 .yets{
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(372px, 380px));
   grid-gap: 1rem;
+  grid-template-columns: repeat(auto-fit, 320px);
   margin-top: 8px;
   margin-bottom: 28px;
 }
@@ -523,6 +701,14 @@ a{
   margin-bottom: 32px;
 }
 
+#tags{
+  color: #909294;
+}
+
+  #tags a{
+    color: #909294;
+  }
+
 /** socials */
 
 #socials{
@@ -530,6 +716,11 @@ a{
   margin: 0 12px 32px 12px;
 }
 
+#socials_footer{
+  display: flex;
+  margin: 12px 12px 32px 12px;
+}
+
 .btn_soc{
   margin-right: 18px;
   padding: 10px;
@@ -538,7 +729,7 @@ a{
 }
 
 .btn_soc_post{
-  margin-left:
+  margin-left: 12px;
 }
 
 
@@ -549,9 +740,12 @@ a{
   border: 1px solid #E9EAEB;
 }
 
-#rating{
+.rating{
   border-radius: 50%;
   background-color: white;
+  padding: 8px;
+  color: white;
+  background: #ACACAC;
 }
 
 .soc_telegram{
@@ -574,6 +768,51 @@ a{
   background: url(/wp-content/themes/vij/pub/icons/instagram-icon.png) no-repeat;  
 }
 
+img-fluid{
+  text-align: center;
+}  
+
+@media (max-width: 640px) {
+  
+  #left{
+    display: none;
+  }
+
+  #mainmenu{
+    display: none;
+  }
+
+  #right{
+    display: none;
+  }
+
+  #nav_content{
+    display: none;
+  }
+
+  #header-contact{
+    display: none;
+  }
+
+  #content{
+    margin: 8px;
+    width: 540px;
+  }
+
+  .img-fluid{
+    max-width: 80%;
+  }
+
+
+  .post_info_social{
+    display: none;
+  }
+  
+
+}  
+
+
+