FEATURE Introducing component styling

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;
+  }
+}