FEATURE Handling the block styles

resources/css/blocks/narrative-card.css

@@ -1,28 +1,53 @@
 .narrative-card {
-  @apply bg-white border border-primary p-12 mx-auto max-w-screen-lg;
+  @apply p-12 py-24 mx-auto max-w-screen-lg;
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+  &:after {
+    content: '';
+    background-image: url('../resources/img/skew-background.svg');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    @apply absolute inset-0;
+    transform: scaleX(-1);
+  }
+
+  .narrative-card__cover {
+    @apply rotate-3;
+  }
+
+  &--even,
+  &:nth-of-type(even) {
+    &:after {
+      transform: scaleX(1);
+    }
+    .narrative-card__cover {
+      @apply rotate-[-3deg];
+    }
+  }
 
   &--has-cover {
-    @apply grid grid-cols-2 gap-32 items-center;
-    grid-template-columns: 4fr 1fr;
+    @apply grid grid-cols-2 gap-24 items-center;
+    grid-template-columns: 3.5fr 1fr;
 
     &--left {
-      grid-template-columns: 1fr 4fr;
+      grid-template-columns: 1fr 3.5fr;
     }
   }
 
   &__cover {
-    @apply w-full h-auto object-cover border border-primary mx-auto;
+    --margin: 1rem;
+    @apply flex justify-center items-center 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];
+    img {
+      @apply w-full h-full object-cover;
+      width: calc(100% - var(--margin));
+      height: calc(100% - var(--margin));
+      object-position: center;
     }
   }