Stling dynamic picture component

resources/css/blocks/statistiques-collections.css

@@ -86,4 +86,61 @@
       @apply lg:hidden;
     }
   }
+
+  .collection-cover-pictures-container {
+    @apply pt-12 pb-32 mb-12 hidden md:block;
+  }
+
+  .collection-cover-pictures {
+    @apply max-w-screen-xl mx-auto relative;
+    .pictures {
+      @apply grid grid-cols-3 2xl:gap-20 xl:gap-12 lg:gap-12 gap-8 items-center px-6;
+    }
+    img {
+      @apply p-4 border border-primary h-auto bg-white;
+    }
+    img:nth-child(n + 1) {
+      @apply -rotate-6;
+    }
+    img:nth-child(n + 2) {
+      @apply rotate-3;
+    }
+    :nth-child(n + 3) {
+      @apply -rotate-2;
+    }
+
+    .decorative-square-right,
+    .decorative-square-left {
+      @apply absolute block top-0 border border-primary  h-full;
+
+      &:after {
+        @apply w-16 h-16 bg-primary absolute content-[''] block z-50;
+
+        background-size: 60% 60%;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+    }
+    .decorative-square-left {
+      @apply left-0;
+      transform: translateY(70%) translateX(-20px) rotate(2deg);
+      height: 80%;
+      width: 40%;
+      &:after {
+        @apply bottom-0 right-12 translate-y-1/2;
+        background-image: url('../resources/img/icons/carhop-outils.svg');
+      }
+    }
+    .decorative-square-right {
+      @apply right-0;
+      width: 40%;
+      height: 90%;
+      transform: translateY(40%) translateX(20px) rotate(-10deg);
+
+      &:after {
+        @apply right-0 top-1/2 translate-x-1/2 p-4;
+        background-image: url('../resources/img/icons/carhop-reportage.svg');
+      }
+    }
+  }
 }

resources/img/icons/carhop-outils.svg

@@ -0,0 +1,14 @@
+<svg width="38" height="45" viewBox="0 0 38 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2187_31433)">
+<path d="M33.8121 24.8552H4.01562V43.8163H33.8121V24.8552Z" stroke="white" stroke-width="2"/>
+<path d="M36.7669 15.4341H1.23047V24.8554H36.7669V15.4341Z" stroke="white" stroke-width="2"/>
+<path d="M18.9062 8.53367V0" stroke="white" stroke-width="2"/>
+<path d="M29.9062 10.2973L36.1759 4.26099" stroke="white" stroke-width="2"/>
+<path d="M7.89469 10.2262L1.625 4.18994" stroke="white" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_2187_31433">
+<rect width="38" height="45" fill="white"/>
+</clipPath>
+</defs>
+</svg>

resources/img/icons/carhop-reportage.svg

@@ -0,0 +1,11 @@
+<svg width="46" height="34" viewBox="0 0 46 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2187_31427)">
+<path d="M30.2969 8.57869L44.6142 1.73474V32.1464L30.3766 25.2813L30.2969 8.57869Z" stroke="white" stroke-width="2"/>
+<path d="M30.2992 1.73474H1.14062V32.1464H30.2992V1.73474Z" stroke="white" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_2187_31427">
+<rect width="45.754" height="33.8918" fill="white"/>
+</clipPath>
+</defs>
+</svg>