task 17075 | переделал rticle-social

wp-content/themes/hantico/assets/css/style.css

@@ -6927,35 +6927,86 @@ h4 {
 }
 
 .article-social{
-  margin-top: 20px;
+  margin-top: 24px;
 
-  padding: 25px 30px;
-  background-color: var(--color-light);
-  border-radius: var(--radius-sm);
+  padding: 23px;
+
+  border-radius: 30px;
+  border: 1px solid #EDEDED;
 
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 24px;
 }
 .article-social__title{
-  font-size: var(--fs-h3-sm);
-    line-height: 1.2;
-    font-weight: 600;
-    color: var(--color-dark);
+  font-size: 26px;
+  font-weight: 700;
+  line-height: 110%; /* 28.6px */
+  letter-spacing: -0.26px;
+  color: var(--color-dark);
+}
+.article-social__title span{
+  color: var(--color-red);
 }
 .article-social__text{
   font-size: 18px;
-  line-height: 1.2;
+  line-height: 150%; /* 27px */
+  letter-spacing: -0.18px;
+  color: var(--color-text);
 }
 .article-social__list{
+  padding: 6px;
+
+  border-radius: 12px;
+  background: linear-gradient(180deg, #F5F5F9 0%, #F9F9F9 100%), #F0F0F0;
+
   display: flex;
-  gap: 10px;
+  align-items: center;
+  gap: 8px;
 }
-.article-social__list > .footer-socials__item {
-  flex: 1;
-  width: auto;
-  height: 44px;
-  aspect-ratio: auto;
+.article-social__list span{
+  width: 100%;
+
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 150%; /* 24px */
+  letter-spacing: -0.16px;
+  color: var(--color-text);
+}
+.article-social__list a {
+  flex-shrink: 0;
+
+  width: 40px;
+  height: 40px;
+
+  transition: all .2s ease-out;
+}
+.article-social__list a:hover{
+  opacity: .8;
+}
+
+@media (max-width: 767.98px) {
+  .article-social{
+    border-radius: 20px;
+
+    gap: 12px;
+  }
+
+  .article-social__title{
+    font-size: 16px;
+    line-height: 110%; /* 17.6px */
+    letter-spacing: -0.16px;
+  }
+  .article-social__text{
+    font-size: 13px;
+    line-height: 150%; /* 19.5px */
+    letter-spacing: -0.13px;
+  }
+  .article-social__list span{
+    font-size: 13px;
+    line-height: 150%; /* 19.5px */
+    letter-spacing: -0.13px;
+  }
 }
 
 .blog-links{