feat: implement responsive container utility and enhance layout styles across components; update Carousel and Gallery for improved structure and consistency

src/components/molecules/Gallery/index.tsx

@@ -43,71 +43,69 @@ export const Gallery: FC<Props> = ({
   };
 
   return (
-    <section className="py-16">
-      <div className="px-6 lg:px-8">
-        <div className="max-w-7xl mx-auto">
-          {heading && (
-            <div className="flex items-center gap-3 mb-8">
-              <div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
-                <FaImages className="text-white" size={20} />
-              </div>
-              <h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
-                {heading}
-              </h2>
+    <section className="blocks">
+      <div className="container">
+        {heading && (
+          <div className="flex items-center gap-3 mb-8">
+            <div className="p-2 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500">
+              <FaImages className="text-white" size={20} />
             </div>
-          )}
-
-          {/* Category tabs */}
-          {categories.length > 0 && (
-            <div className="flex gap-4 mb-8">
-              {Object.entries(images).map(([category, categoryImages]) => {
-                if (!categoryImages.length) return null;
-
-                return (
-                  <button
-                    key={category}
-                    onClick={() =>
-                      setSelectedCategory(category as keyof typeof images)
-                    }
-                    className={`px-6 py-3 rounded-xl font-medium transition-all duration-300 ${
-                      selectedCategory === category
-                        ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg"
-                        : "bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white"
-                    }`}
-                  >
-                    {category} ({categoryImages.length})
-                  </button>
-                );
-              })}
-            </div>
-          )}
-
-          {/* Image grid */}
-          <div className={`grid gap-4 grid-auto-cols-160 [&>div]:contents`}>
-            <LightGallery>
-              {currentImages.slice(0, limit).map((image, index) => (
-                <a
-                  key={index}
-                  href={getImageUrl(image.file_path)}
-                  className="group relative overflow-hidden rounded-xl cursor-pointer bg-slate-800"
-                >
-                  <img src={getImageUrl(image.file_path, "w185")} />
-                </a>
-              ))}
-            </LightGallery>
+            <h2 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+              {heading}
+            </h2>
           </div>
-          {limit < currentImages.length && (
-            <div className="flex justify-center mt-6">
-              <Button
-                theme="teal"
-                size="small"
-                onClick={() => setLimit(currentImages.length)}
+        )}
+
+        {/* Category tabs */}
+        {categories.length > 0 && (
+          <div className="flex gap-4 mb-8">
+            {Object.entries(images).map(([category, categoryImages]) => {
+              if (!categoryImages.length) return null;
+
+              return (
+                <button
+                  key={category}
+                  onClick={() =>
+                    setSelectedCategory(category as keyof typeof images)
+                  }
+                  className={`px-6 py-3 rounded-xl font-medium transition-all duration-300 ${
+                    selectedCategory === category
+                      ? "bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg"
+                      : "bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white"
+                  }`}
+                >
+                  {category} ({categoryImages.length})
+                </button>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Image grid */}
+        <div className={`grid gap-4 grid-auto-cols-160 [&>div]:contents`}>
+          <LightGallery>
+            {currentImages.slice(0, limit).map((image, index) => (
+              <a
+                key={index}
+                href={getImageUrl(image.file_path)}
+                className="group relative overflow-hidden rounded-xl cursor-pointer bg-slate-800"
               >
-                Pokaż wszystkie ({currentImages.length - limit})
-              </Button>
-            </div>
-          )}
+                <img src={getImageUrl(image.file_path, "w185")} />
+              </a>
+            ))}
+          </LightGallery>
         </div>
+        {limit < currentImages.length && (
+          <div className="flex justify-center mt-6">
+            <Button
+              theme="teal"
+              size="small"
+              onClick={() => setLimit(currentImages.length)}
+            >
+              Pokaż wszystkie ({currentImages.length - limit})
+            </Button>
+          </div>
+        )}
       </div>
     </section>
   );