From b4252b33bb02432d5b0b61b81632280a7a5ad591 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Thu, 30 Nov 2023 14:27:14 +0100
Subject: [PATCH] Added `container` mixin with responsive sizes

Implemented a new SCSS mixin named 'container' to handle different container sizes: small, medium, and large. This mixin allows for dynamic styling based on the specified size parameter. Styles for 'small' and 'large' sizes are structured for future customization, while the 'medium' size is currently set with a max-width of 1440px and centered margin.
---
 base.scss                      |  1 +
 src/styles/scss/container.scss | 10 ++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 src/styles/scss/container.scss

diff --git a/base.scss b/base.scss
index c47333cc2..5df70aa8b 100644
--- a/base.scss
+++ b/base.scss
@@ -1,6 +1,7 @@
 @import "./src/styles/scss/reset";
 @import "./src/stories/Library/colors/color-variables";
 @import "./src/styles/scss/skeleton";
+@import "./src/styles/scss/container";
 
 // The imports below are not advised to be moved around, because
 // they cross-reference various defined variables between each other.
diff --git a/src/styles/scss/container.scss b/src/styles/scss/container.scss
new file mode 100644
index 000000000..75d24b9cb
--- /dev/null
+++ b/src/styles/scss/container.scss
@@ -0,0 +1,10 @@
+@mixin container($size) {
+  @if $size == small {
+    // Styles for small size
+  } @else if $size == medium {
+    max-width: 1440px;
+    margin: 0 auto;
+  } @else if $size == large {
+    // Styles for large size
+  }
+}