extending css components features

resources/css/components/breadcrumb.css

@@ -1,5 +1,5 @@
 .breadcrumbs_navigation {
-  @apply py-6 max-w-screen-xl mx-auto;
+  @apply py-6 container mx-auto px-0;
   ol {
     @apply list-none flex items-center text-sm font-bold;
 

resources/css/components/card-container.css

@@ -1,11 +0,0 @@
-.card-container {
-  @apply grid 
-	grid-cols-1 
-	sm:grid-cols-2 
-	xl:grid-cols-4 
-	max-w-screen-2xl 
-	px-8
-	py-16
-	gap-8
-	mx-auto;
-}

resources/css/components/card-grid-container.css

@@ -0,0 +1,12 @@
+.card-grid-container {
+  @apply container
+	grid 
+	grid-cols-1 
+	sm:grid-cols-2 
+	xl:grid-cols-4 
+
+
+	md:py-16
+	gap-8
+	mx-auto;
+}

resources/css/components/cta.css

@@ -1,7 +1,7 @@
 .cta {
   @apply block w-fit my-2 text-base font-bold;
   &--button {
-    @apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit;
+    @apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit cursor-pointer;
   }
   &--circular {
     @apply rounded-full focus:rounded-full aspect-square	w-12 flex items-center justify-center;

resources/css/components/filters-toolbar.css

@@ -0,0 +1,9 @@
+.filters-toolbar {
+  @apply flex
+  flex-col
+  items-center
+  md:flex-row 
+  container
+  mx-auto 
+  gap-x-8 gap-y-3 p-0 py-8;
+}

resources/css/components/heading-box.css

@@ -1,6 +1,21 @@
 .heading-box {
-  @apply bg-primary text-white text-center py-12 max-w-screen-xl mx-auto
-	mt-8 rounded-2xl relative pt-20;
+  @apply container
+  bg-primary 
+  text-white
+   text-center
+   mx-auto
+   py-12
+   rounded-2xl
+   pt-20
+   mt-8
+   relative;
+
+  /* max-w-screen-2xl 
+  px-8 mx-auto
+
+  
+  relative 
+  pt-20; */
   &__title {
     @apply uppercase font-medium text-xl tracking-widest;
   }