From a7e152323969b6c47f53b0d2b38ffb4164aeb7ac Mon Sep 17 00:00:00 2001
From: Anton <anton260903@gmail.com>
Date: Mon, 23 Sep 2024 21:41:19 +0300
Subject: [PATCH] feat: main page banners fixed according to the mockup

---
 .../StaticBanners/StaticBanner.styles.scss    | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/src/features/MainPage/StaticBanners/StaticBanner.styles.scss b/src/features/MainPage/StaticBanners/StaticBanner.styles.scss
index bbade5d97..5b72e3f3d 100644
--- a/src/features/MainPage/StaticBanners/StaticBanner.styles.scss
+++ b/src/features/MainPage/StaticBanners/StaticBanner.styles.scss
@@ -98,19 +98,49 @@
     }
 
     @media screen and (max-width: 1151px) {
+        &.catalog {
+            @include mut.sized($height: 312px);
+
+            .mainContainer {
+                .textContainer {
+                    p.title {
+                        height: 100%;
+                    }
+                }
+            }
+        }
 
+        &.support {
+            .mainContainer {
+                .textContainer {
+                    p.title {
+                        font-size: f.pxToRem(28px);
+                        @include mut.rem-margined($bottom: 20px);
+                    }
+                }
+
+                .redirectButton {
+                    margin-left: 1.2rem !important;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1025px) {
         .left,
         .right {
             display: none;
         }
 
         &.catalog {
+            @include mut.sized($height: 225px);
             @include mut.flexed($direction: column, $justify-content: center, $align-items: center);
 
             .mainContainer {
                 .textContainer {
                     p.title {
                         @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 28px);
+                        @include mut.sized($height: 30px);
                     }
 
                     p.content {
@@ -125,6 +155,21 @@
                 }
             }
         }
+
+        &.support {
+            .mainContainer {
+                .textContainer {
+                    p.title {
+                        font-size: f.pxToRem(30px);
+                        @include mut.rem-margined($bottom: 30px);
+                    }
+                }
+
+                .redirectButton {
+                    @include mut.rem-margined($left: 60px);
+                }
+            }
+        }
     }
 
     @media screen and (max-width: 980px) {