Updated

frontend/assets/css/tailwind.css

@@ -119,6 +119,11 @@
     --breakpoint-3xl: 1700px;
     --breakpoint-2xs: 400px;
     --breakpoint-xs: 480px;
+    --breakpoint-sm: 640px;
+    --breakpoint-md: 768px;
+    --breakpoint-lg: 1024px;
+    --breakpoint-xl: 1280px;
+    --breakpoint-2xl: 1536px;
 
     /* ANIMATIONS */
     --animate-marquee: marquee 20s linear infinite;
@@ -261,7 +266,29 @@
 
 @utility container {
     @apply mx-auto;
-    padding-inline: 3rem;
+    padding-inline: 1.5rem;
+    max-width: 1380px;
+
+    @screen 2xs {
+        padding-inline: 1rem;
+    }
+
+    @screen xs {
+        padding-inline: 1rem;
+    }
+
+    @screen sm {
+        padding-inline: 1rem;
+    }
+
+    @screen md {
+        padding-inline: 2rem;
+    }
+
+    @screen lg {
+        padding-inline: 3rem;
+    }
+
     @screen xl {
         padding-inline: 5rem;
     }