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