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