From 982899419c6756492e9e3879f9ae97fa15525f62 Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Wed, 8 Apr 2026 16:33:30 +0200
Subject: [PATCH] FEATURE introducing component

---
 .../css/blocks/random-collection-image.css    | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 resources/css/blocks/random-collection-image.css

diff --git a/resources/css/blocks/random-collection-image.css b/resources/css/blocks/random-collection-image.css
new file mode 100644
index 0000000..c8f6212
--- /dev/null
+++ b/resources/css/blocks/random-collection-image.css
@@ -0,0 +1,37 @@
+figure.random-collection-image-container {
+  @apply flex flex-col justify-start items-center;
+
+  img.random-collection-image {
+    @apply border-2 border-primary bg-white p-4;
+    object-fit: cover;
+    object-position: center;
+
+    &--landscape {
+      aspect-ratio: 16/10;
+    }
+    &--portrait {
+      aspect-ratio: 10/14;
+      max-height: 70vh;
+      width: auto;
+    }
+    &--square {
+      width: auto;
+      max-width: 960px;
+      max-height: 70vh;
+      aspect-ratio: 1/1;
+    }
+  }
+  figcaption.random-collection-image-caption {
+    @apply text-base text-center mt-2 pt-2;
+  }
+}
+
+.random-collection-image-container.prev-overlap-image {
+  --random-collection-overlap: -20rem;
+
+  position: relative;
+  z-index: 2;
+  margin-top: 20rem;
+  transform: translateY(var(--random-collection-overlap, -20rem));
+  margin-bottom: calc(var(--random-collection-overlap) + 3rem);
+}