fx mob

public/css/styles.css

@@ -650,6 +650,12 @@ h1, h2, h3, h4, h5, h6 {
   cursor: pointer;
   border: none;
 }
+@media (max-width: 768px) {
+  .btn {
+    font-size: 14px;
+    padding: 12px 24px;
+  }
+}
 .btn--accent {
   background: var(--accent-color);
   color: #fff;
@@ -670,6 +676,12 @@ h1, h2, h3, h4, h5, h6 {
   gap: 24px;
   border-radius: 8px;
 }
+@media (max-width: 768px) {
+  .author {
+    gap: 16px;
+    flex-direction: column;
+  }
+}
 .author__img {
   flex-shrink: 0;
   width: 100px;
@@ -677,6 +689,12 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 50%;
   overflow: hidden;
 }
+@media (max-width: 768px) {
+  .author__img {
+    width: 60px;
+    height: 60px;
+  }
+}
 .author__img img {
   width: 100%;
   height: 100%;
@@ -704,6 +722,11 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
   line-height: 18px; /* 112.5% */
 }
+@media (max-width: 768px) {
+  .author__name-n {
+    font-size: 14px;
+  }
+}
 .author__name-v {
   color: var(--accent-color);
   font-size: 18px;
@@ -711,6 +734,11 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
   line-height: 18px; /* 100% */
 }
+@media (max-width: 768px) {
+  .author__name-v {
+    font-size: 16px;
+  }
+}
 
 .faq {
   display: flex;
@@ -751,6 +779,11 @@ h1, h2, h3, h4, h5, h6 {
   align-items: center;
   gap: 16px;
 }
+@media (max-width: 768px) {
+  .faq__question {
+    padding: 16px 56px 16px 16px;
+  }
+}
 .faq__question h3 {
   margin: 0;
   font-size: 16px;
@@ -786,10 +819,15 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 600;
   background-color: var(--accent-color);
   color: var(--text-color);
-  min-width: 32px;
   flex-shrink: 0;
   border-radius: 50%;
 }
+@media (max-width: 768px) {
+  .faq__number {
+    width: 26px;
+    height: 26px;
+  }
+}
 .faq__question-title {
   flex: 1;
   font-size: 16px;

resources/sass/components/_author.scss

@@ -3,6 +3,10 @@
     align-items: center;
     gap: 24px;
     border-radius: 8px;
+    @include mobile{
+        gap:16px;
+        flex-direction: column;
+    }
     &__img {
         flex-shrink: 0;
         width: 100px;
@@ -10,6 +14,11 @@
         border-radius: 50%;
         overflow: hidden;
 
+        @include mobile{
+            width:60px;
+            height:60px;
+        }
+
         img {
             width: 100%;
             height: 100%;
@@ -40,6 +49,9 @@
         font-style: normal;
         font-weight: 700;
         line-height: 18px; /* 112.5% */
+        @include mobile{
+            font-size:14px;
+        }
     }
     &__name-v{
         color: var(--accent-color);
@@ -47,5 +59,8 @@
         font-style: normal;
         font-weight: 700;
         line-height: 18px; /* 100% */
+        @include mobile{
+            font-size:16px;
+        }
     }
 }

resources/sass/components/_buttons.scss

@@ -19,6 +19,11 @@
     cursor: pointer;
     border: none;
 
+    @include mobile{
+        font-size:14px;
+        padding:12px 24px;
+    }
+
     &--accent {
         background: var(--accent-color);
         color: #fff;

resources/sass/components/_faq.scss

@@ -42,6 +42,10 @@
         align-items: center;
         gap: 16px;
 
+        @include mobile{
+            padding: 16px 56px 16px 16px;
+        }
+
         h3 {
             margin: 0;
             font-size: 16px;
@@ -84,9 +88,12 @@
         font-weight: 600;
         background-color: var(--accent-color);
         color: var(--text-color);
-        min-width: 32px;
         flex-shrink: 0;
         border-radius:50%;
+        @include mobile{
+            width:26px;
+            height:26px;
+        }
     }
 
     &__question-title {