STYLE Refining text-align behaviour

resources/css/app.css

@@ -48,6 +48,8 @@
 @import './blocks/narrative-card.css';
 @import './blocks/scroll-story-block.css';
 @import './blocks/gallery.css';
+@import './blocks/content-card.css';
+@import './blocks/card-grid.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/blocks/card-grid.css

@@ -0,0 +1,19 @@
+.card-grid {
+  &--columns-2 .card-grid__innerblocks {
+    @apply md:grid-cols-2;
+    /* grid-template-columns: repeat(2, 1fr); */
+  }
+  &--columns-3 .card-grid__innerblocks {
+    @apply md:grid-cols-3;
+  }
+  &--columns-4 .card-grid__innerblocks {
+    @apply md:grid-cols-2 lg:grid-cols-4;
+  }
+  &--columns-5 .card-grid__innerblocks {
+    @apply md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5;
+  }
+
+  &__innerblocks {
+    @apply gap-8;
+  }
+}

resources/css/blocks/chapter-section.css

@@ -72,6 +72,21 @@
     &--small {
       @apply !h-12;
     }
+    &--classic {
+      @apply !rounded-none;
+    }
+    &--photoframe {
+      @apply object-cover;
+      border: 20px solid white;
+      box-sizing: content-box;
+      filter: saturate(0);
+      transition: all 0.3s ease;
+
+      &:hover {
+        filter: saturate(1);
+        scale: 1.01;
+      }
+    }
   }
 
   &__background {
@@ -96,3 +111,9 @@
     z-index: 2;
   }
 }
+
+.chapter-section:nth-child(even) {
+  .chapter-section__cover--photoframe {
+    @apply -rotate-1;
+  }
+}

resources/css/blocks/content-box.css

@@ -16,6 +16,9 @@
     color: var(--content-box-text-color);
   }
 
+  .wp-block-group {
+  }
+
   &--bg-light {
     --content-box-text-color: var(--wp--preset--color--carhop-green);
   }

resources/css/blocks/content-card.css

@@ -0,0 +1,11 @@
+.content-card {
+  h1.wp-block-heading,
+  h2.wp-block-heading,
+  h3.wp-block-heading,
+  h4.wp-block-heading,
+  h5.wp-block-heading,
+  h6.wp-block-heading {
+    @apply nunito;
+    letter-spacing: 0.05em;
+  }
+}

resources/css/blocks/decorative-shapes.css

@@ -1,3 +1,4 @@
 .decorative-shapes {
-  @apply py-32;
+  /* @apply py-32; */
+  @apply py-12;
 }

resources/css/blocks/heading.css

@@ -1,6 +1,6 @@
 .carhop-heading {
   &__innerblocks {
-    @apply max-w-screen-2xl mx-auto  flex flex-col  justify-center gap-8;
+    @apply alignwide !mx-auto  flex flex-col  justify-center gap-8;
   }
 
   &--align-center {
@@ -20,7 +20,16 @@
   h4,
   h5,
   h6 {
-    @apply font-light uppercase tracking-wider max-w-4xl mx-auto !text-5xl;
+    @apply font-light uppercase tracking-wider max-w-4xl  !text-5xl;
     line-height: 1.2 !important;
   }
+
+  h1.has-text-align-center,
+  h2.has-text-align-center,
+  h3.has-text-align-center,
+  h4.has-text-align-center,
+  h5.has-text-align-center,
+  h6.has-text-align-center {
+    @apply mx-auto;
+  }
 }