V3 fix correct maxwidths (#991)

* Update widths in global

* Update widths to variables in content

* Add padding to body and remove padding from components

src/components/customerCases/customerCase/CustomerCase.tsx

@@ -98,10 +98,12 @@ function ColoredTitle({
   const postColorText = title.slice(endColorIndex);
 
   return (
-    <Text type={"h1"} className={styles.mainTitle}>
-      <span>{preColorText}</span>
-      <span style={{ color: color }}>{colorText}</span>
-      <span>{postColorText}</span>
-    </Text>
+    <div className={styles.titleWrapper}>
+      <Text type={"h1"} className={styles.mainTitle}>
+        <span>{preColorText}</span>
+        <span style={{ color: color }}>{colorText}</span>
+        <span>{postColorText}</span>
+      </Text>
+    </div>
   );
 }

src/components/customerCases/customerCase/customerCase.module.css

@@ -1,12 +1,12 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin: 4rem 2rem;
+  margin: 4rem 0rem;
   align-items: center;
   justify-content: center;
 
   @media (max-width: 1024px) {
-    margin: 2rem 1rem;
+    margin: 2rem 0rem;
   }
 }
 
@@ -15,17 +15,24 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-width: 1400px;
-  padding: 0 2rem;
+  max-width: var(--max-content-width-large);
+}
 
-  @media (max-width: 1024px) {
-    padding: 0 1rem;
-  }
+.titleWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .mainTitle {
   font-weight: 600;
   gap: 1.62rem;
+  max-width: var(--max-content-width-medium);
+  width: 100%;
+
+  @media (max-width: 425px) {
+    font-size: 1.75rem;
+  }
 }
 
 .mainImageWrapper {

src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css

@@ -3,7 +3,7 @@
   flex-direction: row;
   gap: 1rem;
   width: 100%;
-  max-width: 960px;
+  max-width: var(--max-content-width-medium);
 
   @media (max-width: 425px) {
     flex-direction: column;

src/components/customerCases/customerCase/sections/image/imageSection.module.css

@@ -5,7 +5,7 @@
 }
 
 .content {
-  max-width: 960px;
+  max-width: var(--max-content-width-medium);
   display: flex;
   gap: 1rem;
   justify-content: center;

src/components/customerCases/customerCase/sections/list/listBlock.module.css

@@ -11,7 +11,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 1rem;
-  max-width: 960px;
+  max-width: var(--max-content-width-medium);
 }
 
 .tagwrapper {

src/components/customerCases/customerCase/sections/results/ResultsBlock.tsx

@@ -30,30 +30,32 @@ function StackedHighlights({ section, blockColor }: ResultsBlockProps) {
 
   return (
     <div className={styles.highlightWrapper} style={style}>
-      <div className={styles.highlightBlock}>
-        <Text type="labelRegular" className={styles.highlightOutside}>
-          {section.resultsBlockTitle}
-        </Text>
-        {section.quote?.map((quote) => (
-          <div className={styles.highlightCard} key={quote._key}>
-            <div className={styles.innerContent}>
-              <Text type="h2">{quote.quoteText}</Text>
-              <p className={styles.subtitle}>{quote.quoteAuthor}</p>
+      <div className={styles.content}>
+        <div className={styles.highlightBlock}>
+          <Text type="labelRegular" className={styles.highlightOutside}>
+            {section.resultsBlockTitle}
+          </Text>
+          {section.quote?.map((quote) => (
+            <div className={styles.highlightCard} key={quote._key}>
+              <div className={styles.innerContent}>
+                <Text type="h2">{quote.quoteText}</Text>
+                <p className={styles.subtitle}>{quote.quoteAuthor}</p>
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-      <div className={styles.highlightRow}>
-        {section.resultsList?.map((result) => (
-          <div className={styles.highlightCard} key={result._key}>
-            <div className={styles.innerContent}>
-              <Text type="h2" className={styles.result}>
-                {result.result}
-              </Text>
-              <p className={styles.subtitle}>{result.description}</p>
+          ))}
+        </div>
+        <div className={styles.highlightRow}>
+          {section.resultsList?.map((result) => (
+            <div className={styles.highlightCard} key={result._key}>
+              <div className={styles.innerContent}>
+                <Text type="h2" className={styles.result}>
+                  {result.result}
+                </Text>
+                <p className={styles.subtitle}>{result.description}</p>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     </div>
   );

src/components/customerCases/customerCase/sections/results/resultsBlock.module.css

@@ -4,6 +4,10 @@
   align-items: center;
 }
 
+.content {
+  max-width: var(--max-content-width-medium);
+}
+
 .highlightCard {
   border: 3px solid var(--block-color);
   border-radius: 0.25rem;

src/components/customerCases/customerCase/sections/splitSection/splitSection.module.css

@@ -6,7 +6,7 @@
 
 .content {
   width: 100%;
-  max-width: 960px;
+  max-width: var(--max-content-width-medium);
   display: flex;
   justify-content: space-evenly;
   gap: 2rem;

src/components/customerCases/customerCase/sections/text/textSection.module.css

@@ -6,7 +6,7 @@
 }
 
 .content {
-  max-width: 960px;
+  max-width: var(--max-content-width-medium);
 }
 
 .content.framed {

src/components/customerCases/customerCases.module.css

@@ -8,7 +8,7 @@
 .content {
   display: flex;
   flex-direction: column;
-  max-width: 1400px;
+  max-width: var(--max-content-width-large);
   gap: 5rem;
 }
 

src/components/informationSection/informationSection.module.css

@@ -14,7 +14,7 @@
 }
 
 .info {
-  max-width: 88rem;
+  max-width: var(--max-content-width-large);
   display: flex;
   padding: 3rem;
   flex-direction: column;

src/components/legal/legal.module.css

@@ -1,6 +1,6 @@
 .hero {
   width: 100%;
-  max-width: 1200px;
+  max-width: var(--max-content-width-medium);
   margin: auto;
   display: flex;
   flex-direction: column;
@@ -24,7 +24,7 @@
 }
 
 .body {
-  max-width: 1400px;
+  max-width: var(--max-content-width-large);
   margin: auto;
   display: flex;
 

src/components/sections/compensation-calculator/compensation-calculator.module.css

@@ -1,7 +1,7 @@
 .container {
   max-width: var(--max-content-width-large);
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0;
 }
 
 .grid {
@@ -34,9 +34,6 @@
 }
 
 @media (max-width: 440px) {
-  .container {
-    padding: 0 0.5em;
-  }
   .calculator,
   .handbook {
     padding: 1rem;

src/components/sections/contact-box/contact-box.module.css

@@ -1,6 +1,6 @@
 .contactBox {
   margin: 1rem auto;
-  padding: 0 1rem;
+  padding: 0;
   max-width: var(--max-content-width-large);
 }
 

src/components/sections/employeeHighlight/employeeHighlight.module.css

@@ -2,8 +2,7 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding: 0 2rem;
-  max-width: 64rem;
+  max-width: var(--max-content-width-medium);
   margin: 5rem auto;
   gap: 1.5rem;
   color: var(--text-primary);

src/components/sections/employees/employees.module.css

@@ -28,7 +28,7 @@
 .employees {
   display: flex;
   flex-direction: column;
-  max-width: 1400px;
+  max-width: var(--max-content-width-large);
   width: 100%;
   text-wrap: wrap;
   gap: 0.5rem;

src/components/sections/grid/grid.module.css

@@ -4,7 +4,7 @@
 
 .grid {
   width: -webkit-fill-available;
-  max-width: 1200px;
+  max-width: var(--max-content-width-medium);
   display: flex;
   margin: auto;
   padding: 5rem 1rem;

src/components/sections/imageSection/imageSectionComponent.module.css

@@ -1,6 +1,6 @@
 .article {
   width: 100%;
-  max-width: 1000px;
+  max-width: var(--max-content-width-medium);
   display: flex;
   margin: auto;
   padding: 5rem 1rem;

src/components/sections/jobs/jobs.module.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   padding: 2rem 0.375rem 0.375rem 0.375rem;
-  max-width: 53rem;
+  max-width: var(--max-content-width-small);
   margin: 7.5rem auto;
   border-radius: 0.375rem;
   gap: 1.5rem;

src/components/sections/testimonials/testimonials.module.css

@@ -15,7 +15,7 @@
 
 .wrapper {
   width: 100%;
-  max-width: 1200px;
+  max-width: var(--max-content-width-medium);
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

src/styles/global.css

@@ -132,10 +132,10 @@ html {
   --breakpoint-tablet: 834px;
   --breakpoint-large: 1024px;
 
-  /* max widths */
-  --max-content-width-large: 1400px;
-  --max-content-width-medium: 1200px;
-  --max-content-width-small: 1000px;
+  /* max widths, corresponds to 'widest section', 'major 10 col' and '2-3 - 8col' in Figma variables */
+  --max-content-width-large: 1408px; /* 88rem */
+  --max-content-width-medium: 1091px; /* 68.1875rem */
+  --max-content-width-small: 869px; /* 54.3125rem */
 
   /* Radius */
   --radius-small: 6px;
@@ -156,12 +156,17 @@ html {
 
 body {
   margin: 0;
-  padding: 0;
+  padding: 0 1rem;
   color: var(--text-primary);
   background-color: var(--background-bg-light-primary);
   font-family: var(--font-britti-sans);
   line-height: 1.4;
   font-weight: 300;
+  gap: 1rem;
+
+  @media (max-width: 425px) {
+    padding: 0 0.5rem;
+  }
 }
 
 h1,