task 17075 | переделал h-article-quote

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

@@ -32,6 +32,7 @@
   --color-red: #ae001b;
   --color-red-dark: #9a081e;
   --gradient-grey: linear-gradient(180deg, #f5f5f9 0%, #f9f9f9 100%);
+  --color-white: #fff;
 }
 
 :root {
@@ -6247,65 +6248,114 @@ h4 {
 }
 
 .h-article-quote {
-    display: flex;
-    align-items: center;
-    gap: 18px;
-    width: 100%;
-    box-sizing: border-box;
-    margin: 30px 0;
-    padding: 28px 16px;
-    border-radius: 14px;
-    background: var(--color-dark);
-    color: var(--color-light);
-    font-family: inherit;
+  overflow: hidden;
+  position: relative;
+
+  margin: 60px 0;
+
+  min-height: 216px;
+  padding: 40px 40px 40px 240px;
+
+  border-radius: 40px;
+  background: linear-gradient(148deg, #29292D 19.01%, #083743 100.4%)
+}
+.h-article-quote::before{
+  content: '';
+
+  position: absolute;
+  top: -36px;
+  right: 40px;
+
+  width: 174px;
+  height: 128px;
+
+  background-image: url(../img/bg/arrow-q.svg);
+  background-repeat: no-repeat;
+  background-position: bottom;
 }
 
-.h-article-quote .h-article-quote__avatar {
-    display: block;
-    flex: 0 0 90px;
-    width: 90px;
-    height: 90px;
-    border-radius: 50%;
-    object-fit: cover;
-    object-position: center;
+.h-article-quote__avatar {
+  position: absolute;
+  top: -17px;
+  left: -38px;
+
+  max-width: 250px;
+  max-height: 250px;
+
+  width: 250px;
+  height: 250px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+
+  object-fit: cover;
 }
 
-.h-article-quote .h-article-quote__body {
-    flex: 1;
-    min-width: 0;
+.h-article-quote__body {
+   
 }
 
-.h-article-quote .h-article-quote__author {
-    margin: 0 0 6px;
-    font-size: 20px;
-    font-weight: 700;
-    line-height: 1.3;
-    color: var(--color-light);
+.h-article-quote__author {
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 110%; /* 28.6px */
+  letter-spacing: -0.26px;
+  color: var(--color-white);
 }
 
-.h-article-quote .h-article-quote__text {
-    display: block;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    background: none;
-    font-size: 20px;
-    font-weight: 400;
-    font-style: normal;
-    line-height: 1.3;
-    color: var(--color-light);
+.h-article-quote__job{
+  margin-top: 8px;
+
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 110%; /* 15.4px */
+  letter-spacing: -0.14px;
+  color: var(--color-white);
+}
+
+.h-article-quote__text {
+  margin-top: 24px;
+
+  font-size: 20px;
+  line-height: 150%; /* 30px */
+  letter-spacing: -0.2px;
+  color: var(--color-white);
 }
 
 @media (max-width: 767.98px) {
   .h-article-quote{
-    padding: 12px 14px;
+    min-height: auto;
 
-    flex-direction: column;
-    align-items: start;
+    padding: 180px 24px 20px 24px;
+  }
+  .h-article-quote::before{
+    top: 52px;
+    right: -22px;
+  }
+  .h-article-quote__avatar{
+    top: -25px;
+    left: -20px;
+
+    width: 189px;
+    height: 189px;
+  }
+  .h-article-quote__author {
+    font-size: 16px;
+    letter-spacing: -0.16px;
   }
 
-  .h-article-quote .h-article-quote__text{
+  .h-article-quote__job{
+    margin-top: 6px;
+
+    font-size: 13px;
+    letter-spacing: -0.13px;
+  }
+
+  .h-article-quote__text {
+    margin-top: 16px;
+
     font-size: 14px;
+    letter-spacing: -0.14px;
   }
 }
 
@@ -6338,6 +6388,8 @@ h4 {
 
 @media (max-width: 767.98px) {
   .h-article-cards{
+    margin: 30px 0;
+
     grid-template-columns: 1fr;
   }