resources/css/app.css

@@ -43,7 +43,6 @@
 @import './blocks/heading.css';
 @import './blocks/decorative-shapes.css';
 @import './blocks/narrative-card.css';
-@import './blocks/scroll-story-block.css';
 
 /* ########### LIBS ############ */
 @import './libs/swiper.css';

resources/css/blocks/narrative-card.css

@@ -1,53 +1,28 @@
 .narrative-card {
-  @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];
-    }
-  }
+  @apply bg-white border border-primary p-12 mx-auto max-w-screen-lg;
 
   &--has-cover {
-    @apply grid grid-cols-2 gap-24 items-center;
-    grid-template-columns: 3.5fr 1fr;
+    @apply grid grid-cols-2 gap-32 items-center;
+    grid-template-columns: 4fr 1fr;
 
     &--left {
-      grid-template-columns: 1fr 3.5fr;
+      grid-template-columns: 1fr 4fr;
     }
   }
 
   &__cover {
-    --margin: 1rem;
-    @apply flex justify-center items-center w-full h-auto object-cover border border-primary mx-auto;
+    @apply w-full h-auto object-cover border border-primary mx-auto;
     aspect-ratio: 1/1;
+  }
 
-    img {
-      @apply w-full h-full object-cover;
-      width: calc(100% - var(--margin));
-      height: calc(100% - var(--margin));
-      object-position: center;
+  &:nth-child(odd) {
+    .narrative-card__cover {
+      @apply rotate-3;
+    }
+  }
+  &:nth-child(even) {
+    .narrative-card__cover {
+      @apply rotate-[-3deg];
     }
   }
 

resources/css/blocks/scroll-story-block.css

@@ -1,3 +0,0 @@
-.scroll-story-block {
-  @apply py-12 flex flex-col gap-12;
-}

resources/img/skew-background.svg

@@ -1,3 +0,0 @@
-<svg width="1216" height="407" viewBox="0 0 1216 407" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
-<path d="M0.5 11.1045V406.5H1205.51L1215.49 0.503906L0.5 11.1045Z" fill="white" stroke="#136F63"/>
-</svg>

resources/js/app.js

@@ -1,6 +1,5 @@
 import menuInit from './header';
 import initFooterShapes from './footer';
-
 window.addEventListener('load', function () {
   menuInit();
   initFooterShapes();