ENQUEUE narrative-card styling

resources/css/app.css

@@ -42,6 +42,7 @@
 @import './blocks/content-box.css';
 @import './blocks/heading.css';
 @import './blocks/decorative-shapes.css';
+@import './blocks/narrative-card.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/base/typography.css

@@ -28,6 +28,10 @@ p {
   line-height: 1.8;
 }
 
+.wp-block-heading {
+  @apply pb-4;
+}
+
 /* body.wp-admin h1:not(.editor-visual-editor h1),
 body.wp-admin h2:not(.editor-visual-editor h2),
 body.wp-admin h3:not(.editor-visual-editor h3),

resources/css/blocks/narrative-card.css

@@ -0,0 +1,44 @@
+.narrative-card {
+  @apply bg-white border border-primary p-12 mx-auto max-w-screen-lg;
+
+  &--has-cover {
+    @apply grid grid-cols-2 gap-32 items-center;
+    grid-template-columns: 4fr 1fr;
+
+    &--left {
+      grid-template-columns: 1fr 4fr;
+    }
+  }
+
+  &__cover {
+    @apply w-full h-auto object-cover border border-primary mx-auto;
+    aspect-ratio: 1/1;
+  }
+
+  &:nth-child(odd) {
+    .narrative-card__cover {
+      @apply rotate-3;
+    }
+  }
+  &:nth-child(even) {
+    .narrative-card__cover {
+      @apply rotate-[-3deg];
+    }
+  }
+
+  &__content {
+    p {
+      @apply text-primary text-lg;
+    }
+  }
+  .narrative-card__content h1,
+  .narrative-card__content h2,
+  .narrative-card__content h3,
+  .narrative-card__content h4,
+  .narrative-card__content h5,
+  .narrative-card__content h6 {
+    @apply text-primary uppercase;
+
+    font-size: 2.5rem;
+  }
+}