38 lines
914 B
CSS
38 lines
914 B
CSS
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);
|
|
}
|