Provide container class to limit viewport depending on screen width

Also define the necessary variables for these breakpoints and viewports.
This way they can be used in other contexts as well.

themes/ccchh/assets/scss/container.scss

@@ -0,0 +1,38 @@
+// Provide a container class, which limits the viewport depending on the screen
+// width.
+// Taken from PicoCSS, see here:
+// https://github.com/picocss/pico/blob/v1.5.11/scss/layout/_container.scss
+
+.container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      max-width: map-get($viewports, "sm");
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+  @if map-get($breakpoints, "md") {
+    @media (min-width: map-get($breakpoints, "md")) {
+      max-width: map-get($viewports, "md");
+    }
+  }
+
+  @if map-get($breakpoints, "lg") {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      max-width: map-get($viewports, "lg");
+    }
+  }
+
+  @if map-get($breakpoints, "xl") {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      max-width: map-get($viewports, "xl");
+    }
+  }
+}

themes/ccchh/assets/scss/main.scss

@@ -0,0 +1,2 @@
+@import "variables.scss";
+@import "container.scss";

themes/ccchh/assets/scss/variables.scss

@@ -0,0 +1,33 @@
+// Breakpoints and viewports for a responsive website.
+// Taken from Pico CSS, see here:
+// https://github.com/picocss/pico/blob/v1.5.11/scss/_variables.scss#L38
+
+// xs: Extra small (portrait phones)
+// sm: Small(landscape phones)
+// md: Medium(tablets)
+// lg: Large(desktops)
+// xl: Extra large (large desktops)
+
+// NOTE:
+// To provide an easy and fine styling on each breakpoint
+// we didn't use @each, @mixin or @include.
+// That means you need to edit each CSS selector file to add a breakpoint
+
+// Breakpoints
+// 'null' disable the breakpoint
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+) !default;
+
+// Viewports
+$viewports: (
+  // 'null' disable the viewport on a breakpoint
+  sm: 510px,
+  md: 700px,
+  lg: 920px,
+  xl: 1130px
+) !default;