tracker tasks

src/pages/CompanyInfo/companyInfo.scss

@@ -3,6 +3,10 @@
     font-family: "LabGrotesque", sans-serif;
     background-color: #F1F1F1;
     padding-top: 60px;
+
+    @media (max-width: 1375px) {
+      padding-top: 120px;
+    }
   }
 
   &__title {
@@ -17,6 +21,10 @@
       color: #52B709;
       font-weight: 700;
     }
+
+    @media (max-width: 500px) {
+      font-size: 35px;
+    }
   }
 
   &__subTitle {
@@ -25,6 +33,10 @@
     text-align: center;
     font-size: 22px;
     line-height: 32px;
+
+    @media (max-width: 500px) {
+      font-size: 18px;
+    }
   }
 
   .arrowElement {
@@ -35,6 +47,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    @media (max-width: 850px) {
+      display: none;
+    }
   }
 
   .arrowDown {
@@ -42,6 +58,10 @@
     img {
       transform: rotate(90deg);
     }
+
+    @media (max-width: 500px) {
+      margin: 15px auto;
+    }
   }
 
   &__info {
@@ -68,6 +88,19 @@
         ul {
           padding-left: 18px;
         }
+
+        @media (max-width: 700px) {
+          width: 100%;
+        }
+
+        @media (max-width: 600px) {
+          padding: 15px;
+        }
+      }
+
+      @media (max-width: 700px) {
+        flex-direction: column;
+        row-gap: 10px;
       }
     }
 
@@ -78,6 +111,12 @@
       margin: 20px auto 70px;
       max-width: 1000px;
 
+      @media (max-width: 700px) {
+        margin: 10px auto 30px;
+        text-align: center;
+        row-gap: 5px;
+      }
+
       span {
         color: #52B709;
         font-weight: 700;
@@ -94,8 +133,16 @@
         font-size: 18px;
         line-height: 22px;
         row-gap: 20px;
+
+        @media (max-width: 700px) {
+          row-gap: 8px;
+        }
       }
     }
+
+    @media (max-width: 500px) {
+      padding-top: 30px;
+    }
   }
 
   &__countingBlock {
@@ -108,10 +155,34 @@
     row-gap: 16px;
     position: relative;
 
+    @media (max-width: 1125px) {
+      padding-right: 45px;
+    }
+
+    @media (max-width: 850px) {
+      padding: 20px 25px;
+    }
+
+    @media (max-width: 780px) {
+      row-gap: 5px;
+      padding: 15px;
+    }
+
     &__head {
       display: flex;
       justify-content: space-between;
       align-items: center;
+
+      @media (max-width: 850px) {
+        justify-content: space-evenly;
+      }
+
+      @media (max-width: 750px) {
+        text-align: center;
+        img {
+          display: none;
+        }
+      }
     }
 
     &__bottom {
@@ -135,12 +206,21 @@
       span {
         color: #52B709;
       }
+
+      @media (max-width: 780px) {
+        text-align: center;
+        row-gap: 5px;
+      }
     }
 
     .countingBlock__info {
       display: flex;
       flex-direction: column;
       row-gap: 12px;
+
+      @media (max-width: 850px) {
+        row-gap: 5px;
+      }
     }
 
     .countingBlock {
@@ -162,6 +242,18 @@
       position: absolute;
       right: -140px;
       top: -55px;
+
+      @media (max-width: 1440px) {
+        right: -25px;
+      }
+
+      @media (max-width: 1210px) {
+        right: 25px;
+      }
+
+      @media (max-width: 1125px) {
+        display: none;
+      }
     }
   }
 }