ADDED: Component: Containers: Use containers (.container(-fluid) to d…

…efine a flexible & responsive padding and container for the content of a page to stretch/shrink across different viewports.

src/css/components/containers.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2022-2023 SGNetworks. All rights reserved.
+ *
+ * The software is an exclusive copyright of "SGNetworks" and is provided as is exclusively with only "USAGE" access. "Modification",  "Alteration", "Re-distribution" is completely prohibited.
+ * VIOLATING THE ABOVE TERMS IS A PUNISHABLE OFFENSE WHICH MAY LEAD TO LEGAL CONSEQUENCES.
+ */
+
+.container {
+	padding: 0 15px;
+	margin: 0 auto;
+	width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+	.container {
+		max-width: 720px;
+	}
+}
+
+@media only screen and (min-width: 992px) {
+	.container {
+		max-width: 960px;
+	}
+}
+
+@media only screen and (min-width: 1200px) {
+	.container {
+		max-width: 1170px;
+	}
+}
+
+.container-fluid {
+	width: 100%;
+	padding: 0 15px;
+	margin: 0 auto;
+}