FEATURE introducing component

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);
+}