Update containers

frontend/assets/css/tailwind.css

@@ -10,6 +10,11 @@
 @import "./fonts/yekan-bakh.css";
 
 @theme {
+
+    /* CONTAINER */
+
+    --app-container-padding: 20px;
+
     /* COLORS */
     --color-slate-50: hsl(210, 40%, 98%);
     --color-slate-100: hsl(210, 40%, 96%);
@@ -128,6 +133,8 @@
     /* ANIMATIONS */
     --animate-marquee: marquee 20s linear infinite;
     --animate-marquee-reverse: marquee 20s linear infinite reverse;
+    --animate-fade-in: fadeIn 350ms ease-in-out;
+
     --animate-slide-down: slideDown 300ms ease-out;
     --animate-slide-up: slideUp 300ms ease-out;
     --animate-overlay-show: overlayShow 150ms ease-in;
@@ -148,6 +155,16 @@
         }
     }
 
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
     @keyframes slideDown {
         from {
             height: 0;
@@ -265,31 +282,7 @@
 /* CONTAINER */
 
 @utility container {
-    @apply mx-auto px-6;
-
-    @screen 2xs {
-        @apply px-4;
-    }
-
-    @screen xs {
-        @apply px-4;
-    }
-
-    @screen sm {
-        @apply px-4;
-    }
-
-    @screen md {
-        @apply px-8;
-    }
-
-    @screen lg {
-        @apply px-12;
-    }
-
-    @screen xl {
-        @apply px-20;
-    }
+    @apply mx-auto px-[var(--app-container-padding)];
 }
 
 @layer {