From 955b5927ca7cd6ffc34a4934082ea1fe18d551f2 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Wed, 22 Dec 2021 10:37:09 +0700
Subject: [PATCH] fixed paddings on some devices

---
 src/components/main/Header/styles.module.scss    |  5 +++--
 src/containers/main/Container/styles.module.scss | 12 +-----------
 src/layouts/FlowLayout/styles.module.scss        |  3 +--
 src/styles/variables.scss                        | 13 +++++++++++++
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/main/Header/styles.module.scss b/src/components/main/Header/styles.module.scss
index 1d874db8..b8202d72 100644
--- a/src/components/main/Header/styles.module.scss
+++ b/src/components/main/Header/styles.module.scss
@@ -14,7 +14,7 @@
 
   @include desktop {
     height: 64px;
-    padding: 0 $gap;
+    padding: 0;
   }
 
   &.is_scrolled {
@@ -28,7 +28,8 @@
   justify-content: flex-end;
   font-weight: 500;
   box-sizing: border-box;
-  flex: 0 1 $content_width;
+
+  @include container;
 }
 
 .spacer {
diff --git a/src/containers/main/Container/styles.module.scss b/src/containers/main/Container/styles.module.scss
index f6decbd0..0cd1caf2 100644
--- a/src/containers/main/Container/styles.module.scss
+++ b/src/containers/main/Container/styles.module.scss
@@ -1,15 +1,5 @@
 @import "~/styles/variables.scss";
 
 .container {
-  width: 100%;
-  max-width: $content_width;
-  box-sizing: border-box;
-
-  @include tablet {
-    padding: 0;
-  }
-
-  @media (max-width: $content_width + $gap * 4) {
-    padding: 0;
-  }
+  @include container;
 }
diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss
index 4c919f4c..5578aff7 100644
--- a/src/layouts/FlowLayout/styles.module.scss
+++ b/src/layouts/FlowLayout/styles.module.scss
@@ -10,8 +10,7 @@
 $cols: $content_width / $cell;
 
 .container {
-  max-width: $content_width;
-  width: 100%;
+  @include container;
 }
 
 .grid {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c9c42aaf..2000e635 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -319,3 +319,16 @@ $sidebar_border: transparentize(white, 0.95);
 
   animation: __appear 0.25s forwards;
 }
+
+@mixin container {
+  max-width: $content_width + $gap * 8;
+  width: 100%;
+
+  padding-left: $gap * 4;
+  padding-right: $gap * 4;
+
+  @include tablet {
+    padding-left: $gap;
+    padding-right: $gap;
+  }
+}
\ No newline at end of file