fix: scale for mid mobile devices

src/sections/TestimonialsSection/components/TestimonialItem/TestimonialItem.tsx

@@ -11,7 +11,7 @@ export function TestimonialItem(props: TestimonialItemProps) {
     return (
         <div {...otherProps}>
             <div className={styles.innerContainer}>
-                <video className={styles.video} controls src={src}/>
+                <video className={styles.video} controls src={`${src}#t=0.1`} preload={"metadata"}/>
                 <div className={styles.description}>
                     <p className={styles.keyPhrase}>{keyPhrase}</p>
                     <p className={styles.clientName}>{clientName}</p>

src/sections/WideChoiceSection/WideChoiceSection.module.css

@@ -1,7 +1,7 @@
 .innerContainer {
     background-color: var(--grey);
-    padding: 1rem 3rem 2rem;
-    margin: 0 -3rem;
+    padding: 1rem 1.5rem 2rem;
+    margin: 0 -1.5rem;
 }
 
 .heading {

src/sections/WideChoiceSection/components/WideChoiceItem/WideChoiceItem.module.css

@@ -1,15 +1,10 @@
 .root {
-    /*width: 12rem;*/
-    /*height: 12rem;*/
     background-color: var(--white);
     position: relative;
 }
 
 .container {
-    /*height: 100%;*/
-    /*display: block;*/
     height: 12rem;
-    /*width: 8rem;*/
     padding: 1rem;
     display: flex;
     flex-direction: column;
@@ -23,12 +18,7 @@
     justify-content: center;
 }
 
-.name > p {
-    /*position: absolute;*/
-}
-
 .imageContainer {
-    /*height: 75%;*/
     height: 70%;
     display: flex;
     justify-content: center;
@@ -37,34 +27,3 @@
 .img {
     width: auto;
 }
-
-/*.root {*/
-/*    width: 100%;*/
-/*}*/
-
-/*.container {*/
-/*    width: 10rem;*/
-/*    height: 14rem;*/
-/*    border: 1px solid var(--grey2);*/
-/*    margin: 0 auto;*/
-/*    display: block;*/
-/*}*/
-
-/*.imageContainer {*/
-/*    height: 75%;*/
-/*    display: flex;*/
-/*    align-items: center;*/
-/*    justify-content: center;*/
-/*    border-bottom: 1px solid var(--grey2);*/
-/*}*/
-
-/*.name {*/
-/*    position: relative;*/
-/*    padding: 0.3rem 0;*/
-/*    width: 100%;*/
-/*    text-align: center;*/
-/*    height: 25%;*/
-/*    display: flex;*/
-/*    justify-content: center;*/
-/*    align-items: center;*/
-/*}*/

src/shared/components/Container/Container.module.css

@@ -1,6 +1,6 @@
 .root {
     max-width: var(--container-width);
-    padding: 0 3rem;
+    padding: 0 1.5rem;
     margin: 0 auto;
 }
 

src/shared/styles.css

@@ -1,24 +1,3 @@
-/*@font-face {*/
-/*    font-family: 'HelveticaNeueCyr';*/
-/*    font-style: normal;*/
-/*    font-weight: 700;*/
-/*    src: local('HelveticaNeueCyr'), url('assets/fonts/HelveticaNeueCyr-Bold.ttf') format('ttf');*/
-/*}*/
-
-/*@font-face {*/
-/*    font-family: 'SFProText';*/
-/*    font-style: normal;*/
-/*    font-weight: 400;*/
-/*    src: local('SFProText-Regular'), url('assets/fonts/SFProText-Regular.ttf') format('ttf');*/
-/*}*/
-
-/*@font-face {*/
-/*    font-family: 'SFProText';*/
-/*    font-style: normal;*/
-/*    font-weight: 700;*/
-/*    src: local('SFProText-Bold'), url('assets/fonts/SFProText-Bold.ttf') format('ttf');*/
-/*}*/
-
 *, *:before, *:after {
     box-sizing: border-box;
     margin: 0;
@@ -58,9 +37,9 @@ img {
     display: inline-block;
 }
 
-@media screen and (min-width: 641px) {
+@media screen and (min-width: 430px) {
     html {
-        font-size: 11.43px;
+        font-size: 12px;
     }
 }