add tabs

sass/pages/new-support.scss

@@ -244,11 +244,87 @@
       margin-bottom: 20rem;
     }
   }
+  &__tab-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+  }
+  &__tab-close {
+    cursor: pointer;
+  }
+ &__tab-row {
+
+   @media (max-width: $media-sm) {
+     overflow-x: scroll;
+
+     scrollbar-width: none;
+
+     &::-webkit-scrollbar {
+       display: none;
+     }
+   }
+ }
+  &__tab {
+    padding: 0 30rem 0;
+    margin-top: 30rem;
+    border-top: 1rem solid transparent;
+    overflow: hidden;
+    max-height: 0;
+    transition: max-height 0.4s;
+    &--active {
+      border-top: 1rem solid var(--bg-green);
+      max-height: 3000rem;
+      padding: 0 30rem 30rem;
+    }
+  }
+
+  &__tab-text {
+    display: grid;
+    grid-template-columns: 250rem 1fr;
+    gap: 10rem;
+    @media (max-width: $media-sm) {
+      grid-template-columns: 220rem 1fr;
+    }
+  }
+
+  &__tab-title {
+    padding: 20rem 0;
+  }
+
+  &__tab-item {
+    display: flex;
+    overflow: scroll;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &:first-child {
+      text-align: right;
+      justify-content: end;
+    }
+
+    &--double {
+      display: grid;
+      grid-template-columns: 130rem 70rem;
+      gap: 10rem;
+
+      .p-sm-bold, .p-sm {
+        text-align: left;
+      }
+    }
+
+    @media (max-width: $media-sm) {
+      overflow: visible;
+    }
+  }
 
   &__icons {
     display: flex;
     gap: 5rem;
-    max-width: 750rem   ;
+    max-width: 750rem;
     margin: 0 auto;
     flex-wrap: wrap;
     justify-content: center;
@@ -264,11 +340,13 @@
     width: 72rem;
     height: 72rem;
     flex-shrink: 0;
+
     img {
       width: 100%;
       width: 72rem;
       height: 72rem;
     }
+
     &:hover {
       transform: scale(1.05);
     }

sass/variables/fonts.scss

@@ -13,6 +13,7 @@
   --h3-boold: 700 24rem/32rem var(--main-font);
   --h3-normal: 600 24rem/32rem var(--main-font);
   --h4: 500 18rem/28rem var(--main-font);
+  --h4-bold: 700 18rem/28rem var(--main-font);
   --h5: 300 20rem/28rem var(--main-font);
   --h5-bold: 500 20rem/28rem var(--main-font);
   --h6: 500 30rem/36rem var(--main-font);
@@ -26,6 +27,7 @@
   --p-md: 400 16rem/28rem var(--main-font);
   --p-md-bold: 600 16rem/28rem var(--main-font);
   --p-sm: 500 14rem/21rem var(--main-font);
+  --p-sm-bold: 700 14rem/21rem var(--main-font);
   --p-sub: 300 12rem/15rem var(--main-font);
   --p-card: 300 17rem/24rem var(--main-font);
   --nav-link: 500 16rem/28rem var(--main-font);
@@ -91,11 +93,14 @@
 .h4 {
   font: var(--h4);
 }
-
+.h4-bold {
+  font: var(--h4-bold);
+}
 .h5 {
   font: var(--h5);
   color: var(--black-white);
 }
+
 .h5-bold {
   font: var(--h5-bold);
 }
@@ -127,6 +132,9 @@
 .p-sm {
   font: var(--p-sm);
 }
+.p-sm-bold{
+  font: var(--p-sm-bold);
+}
 .p-sm-light {
   font: var(--p-sm-light);
 }

templates/base.html

@@ -36,6 +36,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Lato:wght@200;300;400;500;600;700&display=swap"
           rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     {% block rss %}
         <link rel="alternate" type="application/rss+xml" title="RSS"