STYLE Introducing styles

resources/css/blocks/dernieres-dynamiques.css

@@ -0,0 +1,115 @@
+.block-dernieres-dynamiques {
+  @apply bg-carhop-orange-50 px-12 xl:px-24 py-32;
+  &__inner {
+    @apply max-w-screen-2xl mx-auto;
+  }
+
+  &__header {
+    @apply flex items-end justify-between gap-8 uppercase text-4xl mb-12;
+
+    .block-title {
+      @apply flex grow items-end justify-between gap-8 uppercase text-4xl;
+      span {
+        @apply block shrink-0;
+      }
+      &:after {
+        @apply w-full z-50 bg-primary block mb-2;
+        height: 1px;
+        content: ' ';
+      }
+    }
+    .header-link {
+      @apply text-lg font-bold   nunito flex items-center gap-3;
+      text-transform: none;
+      span {
+        @apply pt-1;
+      }
+
+      svg {
+        @apply w-8 h-8;
+        transition: transform 0.3s ease-in-out;
+        path,
+        circle {
+          @apply stroke-primary stroke-2;
+        }
+      }
+      &:hover {
+        svg {
+          @apply rotate-45 translate-x-2;
+        }
+      }
+    }
+  }
+
+  &__issue-info {
+    @apply flex items-end gap-6 mb-10;
+
+    .block-dernieres-dynamiques__issue-type::before {
+      @apply content-['']  mr-2 h-3 w-3 rounded-full bg-carhop-orange-400 inline-block;
+    }
+    .block-dernieres-dynamiques__issue-type {
+      @apply font-bold text-xl;
+    }
+    .block-dernieres-dynamiques__issue-reading-time {
+      line-height: 27px;
+    }
+  }
+
+  &__issue-title {
+    @apply text-6xl uppercase pb-12;
+    line-height: 1.1;
+  }
+  &__issue-content-wrapper {
+    @apply grid  gap-12 2xl:gap-24 pb-12;
+
+    grid-template-columns: 61.8fr 38.2fr;
+  }
+  &__issue-content {
+  }
+  &__issue-thumbnail-wrapper {
+    @apply relative;
+    .card-background {
+      @apply absolute inset-0 border-primary border bg-white top-5 left-8;
+      height: 94%;
+      width: 104%;
+      transform: perspective(800px) rotateY(10deg)
+        skewX(1deg) rotateZ(4deg) rotateX(1deg) scale(0.98)
+        translateY(-2px);
+      z-index: 0;
+
+      &::before {
+        @apply content-[''] absolute inset-0 bg-carhop-purple-100 w-full h-full;
+        width: calc(100% - 32px);
+        height: calc(100% - 32px);
+        left: 16px;
+        top: 16px;
+
+        z-index: 0;
+      }
+    }
+  }
+  &__issue-thumbnail {
+    @apply bg-white border-primary border relative;
+    transform: perspective(800px) rotateY(10deg) skewX(2deg);
+    height: 300px;
+    position: relative;
+    z-index: 10;
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  &__issue-description {
+    @apply text-xl;
+  }
+
+  .related-articles {
+    &__title {
+      @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;
+    }
+  }
+}