feat(WEB-250): overview hero final ui

components/Current/Aside/Contacts/contact.module.css

@@ -13,6 +13,7 @@
   color: #483729;
   margin-bottom: 1rem;
 }
+
 .phoneContainer {
   display: flex;
   gap: 10px;
@@ -43,13 +44,14 @@
   padding-top: 7px;
   text-decoration: none;
 }
+
 .phoneNumberLink:active,
 .phoneNumberLink:hover {
   outline: 0;
   text-decoration: underline;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .heading {
     font-size: 1.625rem;
   }

components/Current/Aside/Puff/puff.module.css

@@ -43,13 +43,13 @@
   text-decoration: none;
 }
 
-@media screen and (min-width: 740px) {
+@media screen and (min-width: 768px) {
   .content {
     padding: 20px 0px;
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .heading {
     font-size: 1.375rem;
   }

components/Current/Blocks/List/list.module.css

@@ -65,7 +65,7 @@
   border-bottom: none;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .title {
     font-size: 1.625rem;
   }

components/Current/Blocks/blocks.module.css

@@ -3,7 +3,7 @@
   padding: 20px 10px 5px;
 }
 
-@media screen and (min-width: 740px) {
+@media screen and (min-width: 1367px) {
   .wrapper {
     padding: 20px 0 0;
   }

components/Current/Header/MainMenu/mainMenu.module.css

@@ -1,7 +1,7 @@
 .mainMenu {
   background-color: #fff;
   background-image: none;
-  box-shadow: 0 0 7px rgba(0, 0, 0, .75);
+  box-shadow: 0 0 7px rgba(0, 0, 0, 0.75);
   max-height: 100%;
   overflow: visible;
   position: fixed;
@@ -28,7 +28,7 @@
   justify-self: flex-start;
   left: 0;
   padding: 0.75rem 0.5rem 1rem;
-  transition: .3s;
+  transition: 0.3s;
   user-select: none;
 }
 
@@ -40,7 +40,7 @@
   display: inline-block;
   height: 0.2857142857rem;
   position: relative;
-  transition: .3s;
+  transition: 0.3s;
   width: 2rem;
 }
 
@@ -123,8 +123,12 @@
 .link {
   color: #000;
   display: block;
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: .875rem;
+  font-family:
+    Helvetica Neue,
+    Helvetica,
+    Arial,
+    sans-serif;
+  font-size: 0.875rem;
   font-weight: 700;
   padding-bottom: 20px;
   padding-top: 20px;
@@ -150,11 +154,11 @@
   color: #000;
   display: block;
   font-family: Helvetica;
-  font-size: .875rem;
+  font-size: 0.875rem;
   padding: 5px 0;
 }
 
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 1366px) {
   .logoLink {
     width: 5rem;
   }
@@ -164,9 +168,9 @@
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .mainMenu {
-    background-color: hsla(0, 0%, 100%, .95);
+    background-color: hsla(0, 0%, 100%, 0.95);
     position: relative;
     z-index: unset;
   }
@@ -222,4 +226,4 @@
   .mobileLi {
     display: none;
   }
-}
+}

components/Current/Header/TopMenu/topMenu.module.css

@@ -2,7 +2,7 @@
   background-color: #8d3a7c;
   color: #fff;
   display: none;
-  font-size: .8125rem;
+  font-size: 0.8125rem;
   position: relative;
   z-index: 1;
 }
@@ -32,13 +32,13 @@
   text-decoration: none;
 }
 
-@media screen and (min-width: 740px) {
+@media screen and (min-width: 768px) {
   .container {
     padding: 0 30px;
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .topMenu {
     background-color: #3d3835;
     display: block;
@@ -48,4 +48,4 @@
     padding-top: 4px;
     padding-bottom: 4px;
   }
-}
+}

components/Current/Header/header.module.css

@@ -2,8 +2,8 @@
   display: grid;
 }
 
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 1366px) {
   .header {
     height: 50px;
   }
-}
+}

components/Current/Hero/hero.module.css

@@ -19,13 +19,13 @@
   aspect-ratio: 1/1;
 }
 
-@media screen and (min-width: 740px) {
+@media screen and (min-width: 768px) {
   .heroImage {
     aspect-ratio: auto;
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .wrapper {
     overflow: hidden;
     position: sticky;

components/Current/Preamble/preamble.module.css

@@ -22,7 +22,7 @@
   margin-bottom: 0;
 }
 
-@media (min-width: 740px) {
+@media screen and (min-width: 768px) {
   .container {
     background: transparent;
     padding: 30px 30px 15px;
@@ -31,15 +31,13 @@
   }
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
+  .container {
+    padding: 50px 30px 35px;
+  }
+
   .preamble {
     font-size: 1.5rem;
     line-height: 2.25rem;
   }
 }
-
-@media screen and (min-width: 1200px) {
-  .container {
-    padding: 50px 30px 35px;
-  }
-}

components/Current/Section/section.module.css

@@ -3,7 +3,7 @@
   margin: 0 auto;
 }
 
-@media screen and (min-width: 740px) {
+@media screen and (min-width: 768px) {
   .section {
     padding: 30px 30px 15px;
     grid-template-columns: 2fr 1fr;
@@ -17,7 +17,7 @@
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1367px) {
   .section {
     padding: 50px 30px 35px;
   }