feat: main page banners fixed according to the mockup

ita-social-projects · Sep 23, 2024 · a7e1523 · a7e1523
1 parent c4cf01c
commit a7e1523
Showing 1 changed file with 45 additions and 0 deletions.
diff --git 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) {