From 0e10fb2ed88d357ad5e815ac4ef454ee5223371f Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Mon, 30 Jun 2025 16:01:02 +0200
Subject: [PATCH] FEATURE Handling the block styles

---
 resources/css/blocks/narrative-card.css | 53 ++++++++++++++++++-------
 1 file changed, 39 insertions(+), 14 deletions(-)

diff --git a/resources/css/blocks/narrative-card.css b/resources/css/blocks/narrative-card.css
index b193d01..3bf9b11 100644
--- a/resources/css/blocks/narrative-card.css
+++ b/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;
     }
   }